Elenco dei principali elementi HTML

Indici

Indice dei Tag in ordine alfabetico

Tag	Description
<!--...-->	Defines a comment
!DOCTYPE>	Defines the document type
a	Defines a hyperlink
abbr	Defines an abbreviation or an acronym
acronym	Not supported in HTML5. Use `<abbr>` instead. Defines an acronym
address	Defines contact information for the author/owner of a document
applet	Not supported in HTML5. Use `<embed>` or `<object>` instead. Defines an embedded applet
area	Defines an area inside an image-map
article	Defines an article
aside	Defines content aside from the page content
audio	Defines sound content
b	Defines bold text
base	Specifies the base URL/target for all relative URLs in a document
basefont	Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document.
bdi	Isolates a part of text that might be formatted in a different direction from other text outside it
bdo	Overrides the current text direction
big	Not supported in HTML5. Use CSS instead. Defines big text
blockquote	Defines a section that is quoted from another source
body	Defines the document's body
br	Defines a single line break
button	Defines a clickable button
canvas	Used to draw graphics, on the fly, via scripting (usually JavaScript)
caption	Defines a table caption
center	Not supported in HTML5. Use CSS instead. Defines centered text.
cite	Defines the title of a work
code	Defines a piece of computer code
col	Specifies column properties for each column within a `<colgroup>` element
colgroup	Specifies a group of one or more columns in a table for formatting
data	The <data> tag is used to add a machine-readable translation of a given content.
datalist	Specifies a list of pre-defined options for input controls
dd	Describe a term/name in a description list.
dl	Defines a decription list
dt	Defines a term/name in a description list
del	Defines text that has been deleted from a document
details	Defines additional details that the user can view or hide
dfn	Represents the defining instance of a term
dialog	Defines a dialog box or window
dir	Not supported in HTML5. Use `<ul>` instead. Defines a directory list.
div	Defines a section in a document
dl	Defines a description list
dt	Defines a term/name in a description list
em	Defines emphasized text
embed	Defines a container for an external (non-HTML) application
fieldset	Groups related elements in a form
figcaption	Defines a caption for a `<figure>` element
figure	Specifies self-contained content
font	Not supported in HTML5. Use CSS instead. Defines font, color, and size for text.
footer	Defines a footer for a document or section
form	Defines an HTML form for user input
frame	Not supported in HTML5. Defines a window (a frame) in a `<frameset>`.
frameset	Not supported in HTML5. Defines a set of frames.
h1 .. h6	Defines HTML headings
head	Defines information about the document
header	Defines a header for a document or section
hr	Defines a thematic change in the content
html	Defines the root of an HTML document
i	Defines a part of text in an alternate voice or mood
iframe	Defines an inline frame
img	Defines an image
input	Defines an input control
ins	Defines a text that has been inserted into a document
kbd	Defines keyboard input
label	Associa una label ad un elemento di `<input>`.
legend	Associa una didascalia o meglio un titolo ad un `<fieldset>`.
li	Defines a list item
link	Defines the relationship between a document and an external resource (most used to link to style sheets)
main	Specifies the main content of a document
map	Defines a client-side image-map
mark	Defines marked/highlighted text
menu	Defines a list/menu of commands
menuitem	Defines a command/menu item that the user can invoke from a popup menu
meta	Defines metadata about an HTML document
meter	Defines a scalar measurement within a known range (a gauge)
nav	Defines navigation links
noframes	Not supported in HTML5. Defines an alternate content for users that do not support frames.
noscript	Defines an alternate content for users that do not support client-side scripts
object	Defines an embedded object
ol	Defines an ordered list
optgroup	Defines a group of related options in a drop-down list
option	Defines an option in a drop-down list
output	Defines the result of a calculation
p	Defines a paragraph
param	Defines a parameter for an object
picture	Defines a container for multiple image resources
pre	Defines preformatted text
progress	Represents the progress of a task
q	Defines a short quotation
rp	Defines what to show in browsers that do not support ruby annotations
rt	Defines an explanation/pronunciation of characters (for East Asian typography)
ruby	Defines a ruby annotation (for East Asian typography)
s	Defines text that is no longer correct
samp	Defines sample output from a computer program
script	Defines a client-side script
section	Defines a section in a document
select	Defines a drop-down list
small	Defines smaller text
source	Defines multiple media resources for media elements (`<video>` and `<audio>`)
span	Defines a section in a document
strike	Not supported in HTML5. Use `<del>` or `<s>` instead. Defines strikethrough text.
strong	Defines important text
style	Defines style information for a document
sub	Defines subscripted text
summary	Defines a visible heading for a `<details>` element
sup	Defines superscripted text
table	Defines a table
tbody	Groups the body content in a table
td	Defines a cell in a table
textarea	Defines a multiline input control (text area)
tfoot	Groups the footer content in a table
th	Defines a header cell in a table
thead	Groups the header content in a table
time	Defines a date/time
title	Defines a title for the document
tr	Defines a row in a table
track	Defines text tracks for media elements (`<video>` and `<audio>`)
tt	Not supported in HTML5. Use CSS instead. Defines teletype text.
u	Defines text that should be stylistically different from normal text
ul	Defines an unordered list
var	Defines a variable
video	Defines a video or movie
wbr	Defines a possible line-break

Indice in base alla tipologia dei Tag

Basic HTML
Tag	Description
!DOCTYPE>	Defines the document type
html	Defines an HTML document
head	Defines information about the document
title	Defines a title for the document
body	Defines the document's body
h1 - h6	Defines HTML headings
p	Defines a paragraph
br	Inserts a single line break
hr	Defines a thematic change in the content
<!--...-->	Defines a comment
Formatting
Tag	Description
acronym	Not supported in HTML5. Use `<abbr>` instead. Defines an acronym
abbr	Defines an abbreviation or an acronym
address	Defines contact information for the author/owner of a document/article
b	Defines bold text
bdi	Isolates a part of text that might be formatted in a different direction from other text outside it
bdo	Overrides the current text direction
big	Not supported in HTML5. Use CSS instead. Defines big text
blockquote	Defines a section that is quoted from another source
center	Not supported in HTML5. Use CSS instead. Defines centered text.
cite	Defines the title of a work
code	Defines a piece of computer code
del	Defines text that has been deleted from a document
dfn	Represents the defining instance of a term
em	Defines emphasized text
font	Not supported in HTML5. Use CSS instead. Defines font, color, and size for text.
i	Defines a part of text in an alternate voice or mood
ins	Defines a text that has been inserted into a document
kbd	Defines keyboard input
mark	Defines marked/highlighted text
meter	Defines a scalar measurement within a known range (a gauge)
pre	Defines preformatted text
progress	Represents the progress of a task
q	Defines a short quotation
rp	Defines what to show in browsers that do not support ruby annotations
rt	Defines an explanation/pronunciation of characters (for East Asian typography)
ruby	Defines a ruby annotation (for East Asian typography)
s	Defines text that is no longer correct
samp	Defines sample output from a computer program
small	Defines smaller text
strike	Not supported in HTML5. Use `<del>` or `<s>` instead. Defines strikethrough text.
strong	Defines important text
sub	Defines subscripted text
sup	Defines superscripted text
time	Defines a date/time
tt	Not supported in HTML5. Use CSS instead. Defines teletype text
u	Defines text that should be stylistically different from normal text
var	Defines a variable
wbr	Defines a possible line-break
Forms and Input
Tag	Description
form	Defines an HTML form for user input
input	Defines an input control
textarea	Defines a multiline input control (text area)
button	Defines a clickable button
select	Defines a drop-down list
optgroup	Defines a group of related options in a drop-down list
option	Defines an option in a drop-down list
label	Associa una label ad un elemento di `<input>`.
fieldset	Groups related elements in a form
legend	Associa una didascalia o meglio un titolo ad un <fieldset>.
datalist	Specifies a list of pre-defined options for input controls
output	Defines the result of a calculation
Frames
Tag	Description
frame	Not supported in HTML5. Defines a window (a frame) in a frameset
frameset	Not supported in HTML5. Defines a set of frames
noframes	Not supported in HTML5. Defines an alternate content for users that do not support frames
iframe	Defines an inline frame
Images
Tag	Description
img	Defines an image
map	Defines a client-side image-map
area	Defines an area inside an image-map
canvas	Used to draw graphics, on the fly, via scripting (usually JavaScript)
figcaption	Defines a caption for a `<figure>` element
figure	Specifies self-contained content
picture	Defines a container for multiple image resources
Audio / Video
Tag	Description
audio	Defines sound content
source	Defines multiple media resources for media elements (`<video>`, `<audio>` and `<picture>`)
track	Defines text tracks for media elements (`<video>` and `<audio>`)
video	Defines a video or movie
Links
Tag	Description
a	Defines a hyperlink
link	Defines the relationship between a document and an external resource (most used to link to style sheets)
nav	Defines navigation links
Lists
Tag	Description
ul	Defines an unordered list
ol	Defines an ordered list
li	Defines a list item
dir	Not supported in HTML5. Use `<ul>` instead. Defines a directory list
dl	Defines a description list
dt	Defines a term/name in a description list
dd	Defines a description of a term/name in a description list
menu	Defines a list/menu of commands
menuitem	Defines a command/menu item that the user can invoke from a popup menu
Tables
Tag	Description
table	Defines a table
caption	Defines a table caption
th	Defines a header cell in a table
tr	Defines a row in a table
td	Defines a cell in a table
thead	Groups the header content in a table
tbody	Groups the body content in a table
tfoot	Groups the footer content in a table
col	Specifies column properties for each column within a `<colgroup>` element
colgroup	Specifies a group of one or more columns in a table for formatting
Styles and Semantics
Tag	Description
style	Defines style information for a document
div	Defines a section in a document
span	Defines a section in a document
header	Defines a header for a document or section
footer	Defines a footer for a document or section
main	Specifies the main content of a document
section	Defines a section in a document
article	Defines an article
aside	Defines content aside from the page content
details	Defines additional details that the user can view or hide
dialog	Defines a dialog box or window
summary	Defines a visible heading for a `<details>` element
data	Links the given content with a machine-readable translation
Meta Info
Tag	Description
head	Defines information about the document
meta	Defines metadata about an HTML document
base	Specifies the base URL/target for all relative URLs in a document
basefont	Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document
Programming
Tag	Description
script	Defines a client-side script
noscript	Defines an alternate content for users that do not support client-side scripts
applet	Not supported in HTML5. Use `<embed>` or `<object>` instead. Defines an embedded applet
embed	Defines a container for an external (non-HTML) application
object	Defines an embedded object
param	Defines a parameter for an object

``

Gli elementi  consentono di introdurre dei commenti nel testo HTML.
I commenti non saranno visualizzati dal browser.

I browser non mostrano i commenti HTML

I browser non mostrano i commenti HTML

`<!DOCTYPE>`

L'elemento <!DOCTYPE> individua il presente documento come HTML-5.

`<a>...</a>`

Gli elementi <a> denotano degli iperlink, cioè un collegamento (link) ad un'altra pagina Web.
L'attributo più importante degli elementi <a> è l'attributo href che consente di specificare la destinazione del link.
Generalmente il colore dei link cambia in conformità al loro utilizzo:
I link non ancora utilizzati (o visitati) sono di colore azzurro e sono sottolineati. Es. link.
I link già utilizzati sono di colore porpora e sono sottolineati. Es. link.
I link attivi (cioè sui quali si sta cliccando) sono di colore rosso e sono sottolineati. Es. link.

<a href="#Id_00">link</a> questo è un link.

L'attributo target consente di scegliere in browsing context in cui il nuovo documento dovrà essere caricato.
A questo riguardo si presentano tre possibilità, nel senso che il browsing context può far riferimento ad una finestra, una tab o una <iframe>.
Le opzioni previste sono le seguenti:

`_top`	caricamento nella stessa finestra o tab, senza frame (cioè al livello più alto).
`_blank`	caricamento in una nuova finestra o tab (lasciando aperta la precedente).
`_parent`	caricamento nel contesto del genitore (nel caso di `iframe` nidificate).
`_self`	caricamento nella `iframe` in cui si trova il link (default).
id_iframe	caricamento nella `iframe` di cui viene specificato l'id.
`javascript:void(0)`	Questa notazione viene utilizzata in tutte quelle situazioni in cui si desidera impiegare un elemento <a></a> per richiamare una funzione anziché caricare un documento. Ad esempio: `<a` `href="javascript:void(0)"` `onclick="My_Function();">Run JavaScript Code</a>`

Vedi esempio: target.html target.txt

NOTA: specificando come target il nome di una finestra (anziché di una <iframe>) se questa non esiste viene aperta in caso contrario il nuovo documento viene caricato nella finestra con il nome indicato già aperta.
NOTA: Molti autori ricorrono al nome "blank" (come "_blank", ma senza il prefisso '_').
Si osservi che cliccando ripetutamente sull'opzione "_blank" ogni volta viene aperta una nuova finestra, mentre "blank" apre una nuova finestra solo se la finestra "blank" non è ancora stata aperta, altrimenti ricarica il file nella stessa.
Vedi blank.html.

`<abbr>...</abbr>`

Gli elementi <abbr> denotano le abbreviazioni, per finalità semantiche.

Dott.

`<acronym>...</acronym>`

Gli elementi <acronym> denotano gli acronimi, per finalità semantiche.

ONU

`<address>...</address>`

Gli elementi <address> denotano gli indirizzi, per finalità semantiche.

<address>Mario Rossi<br>Corso Nigra, 60<br>10015-IVREA (TO)</address>

Mario Rossi
Corso Nigra, 60
10015-IVREA (TO)

`<area>...</area>`

Gli elementi <area> individuano un'area attiva (cioè sensibile ai click) all'interno di una image-map.
Questi elementi erano molto usati agli inizi degli anni 2000, ma ora si preferisce impiegare al loro posto delle immagini SVG.
Vedi <map>...</map>.

`<article>...</article>`

Il tag <article> denota una porzione di testo indipendente e autonoma all'interno di un documento più vasto.
Gli elementi article, aside, footer, header e nav sono stati introdotti in HTML-5 allo scopo di standardizzare la nomenclatura utilizzata per indicare le aree in cui vengono tradizionalmente ripartite le pagine Web, rimpiazzando gli identificatori o le classi (non standard) che in HTML-4 erano già impiegate per lo stesso scopo.

Figura 1 - Elementi per la dedinizione dell'organizzazione delle pagine HTML

Si osservi che l'impiego dei suddetti elementi non è obbligatorio, tuttavia ci si aspetta che il loro uso semplifichi il lavoro dei browser che dovranno interpretare le pagine HTML ai fini della loro rappresentazione grafica.
Gli standard non forniscono alcuna indicazione circa la ripartizione degli articoli al loro interno, per cui volendo si potrebbero "nidificare" più elementi <article> uno dentro l'altro. Generalmente si preferisce però suddividere gli articoli in sezioni ricorrendo all'elemento <section>. Si osservi che queste ultime a loro volta potrebbero contenere a loro volta ulteriori sotto-sezioni o addirittura elementi <article>.

`<aside>...</aside>`

Gli elementi <aside> vengono solitamente impiegati per indicare le porzioni di testo collocate a sinistra o a destra dell'articolo (<article>) principale. Vedi Figura 1.

`<audio>...</audio>`

L'elemento <audio> individua una risorsa corrispondente ad una registrazione sonora rendendola fruibile, rendendo disponibile una interfaccia utente costituita di pulsanti di start, stop, regolazione del volume, eccetera.

<audio src="Elementi_HTML_files/horse.ogg" controls="controls"> <source src="Elementi_HTML_files/audio.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>

`<b>...</b>`

Gli elementi <b>, di cui ora si sconsiglia l'uso, venivano un tempo impiegati per evidenziare quei testi che si desiderava stampare in grassetto (bold). Oggi si suggerisce di usare i CSS o ricorrere agli elementi <strong>...</strong>.

<b>bold</b>	bold
<strong>strong</strong>	strong

`<base>...</base>`

Il funzionamento dell'elemento <base> è in qualche modo simile a quello del comando "cd" di Linux o "CD" di MS-DOS, nel senso che consente di cambiare la directory di default considerata come punto di partenza quando occorre cercare un file.
Nel caso di HTML la prassi abituale prevede che il punto di partenza coincida "salvo indicazioni diverse" con la directory di origine della pagina Web, ovvero con la directory dalla quale si è scaricato il file corrispondente alla pagina Web considerata.
Gli elementi <base> permettono di modificare il suddetto default specificando una diversa origine (URL di default) e il target di default per tutti i link di una pagina.

Ad esempio specificando:
<base href="http://www.capralezioni.altervista.org/" target="_blank">
Tutti i link relativi vengono trasformati in link assoluti aventi come prefisso la URL indicata.
NOTA: all'interno di una pagina Web si può inserire al più un elemento <base> e questo deve obbligatoriamente risiedere all'interno dell'elemento <head>.

<bdi>...</bdi>

L'acronimo bdi sta per BiDirectional Isolation. Il tag <bdi> isola una porzione di testo che potrebbe essere scritta in una direzione diversa ripetto al testo principale (ad esempio una citazione in arabo o in ebraico).

<bdo>...</bdo>

L'acronimo bdo sta per BiDirectional Override.
Gli elementi <bdo> consentono di forzare la visualizzazione dei caratteri di una parola o di un testo secondo un ordine diverso da quello previsto per la lingua selezionata.
Volendo ad esempio forzare la stampa da destra a sinistra di un ceto testo in deroga alle regole della lingua italiana sarà sufficiente racchiudere il testo considerato fra i tag <bdo>...</bdo> specificando l'attributo dir="rtl".

<bdo dir="rtl">Questa frase verrà scritta da destra a sinistra</bdo> Questa frase verrà scritta da destra a sinistra

<big>...</big>

Gli elementi <big> denotano quelle porzioni di testo che debbono essere stampate con un carattere di forza maggiore (cioè più grande). Gli elementi <big> non sono più supportati da HTML-5 per cui se ne sconsiglia l'uso suggerendo di ricorrere ai CSS,

testo normale <big>testo ingrandito</big> testo normale testo ingrandito

Ufficialmente l'elemento <big>...</big> non è più supportato da HTML-5, ma è così diffuso che in pratica tutti i browser continuano a gestirlo.
Vedi anche: <small>...</small>.

`<blockquote>...</blockquote>`

Gli elementi <blockquote> denotano delle citazioni che si estendono su più righe.
L'attributo cite consente di rendere disponibile un riferimento, sotto forma di URL, al documento citato.

<blockquote cite="http://www.governo.it/costituzione-italiana/principi-fondamentali/2839">Art. 1

                        L'Italia è una Repubblica democratica, fondata sul lavoro.

                        La sovranità appartiene al popolo, che la esercita nelle forme e nei limiti della Costituzione.</blockquote>

Art. 1 L'Italia è una Repubblica democratica, fondata sul lavoro. La sovranità appartiene al popolo, che la esercita nelle forme e nei limiti della Costituzione.

Dovendo citare una singola frase si suggerisce di usare <q>...</q> che è la versione in-line di <blockquote>.

`<body>...</body>`

Gli elementi <head> e <body> suddividono le pagine HTML in due sezioni denominate rispettivamente testa (<head>) e corpo (<body>).
L'elemento <body> consente in particolare di specificare le caratteristiche stilistiche che si desidera applicare all'intera pagina Web, in particolare l'immagine di sfondo:

<body style="backgound-image=url('sfondo.jpg')">...</body>

Vedi anche <head>...</head>.

`<br>`

Gli elementi <br> vengono impiegati per segnalare l'interruzione di una linea di testo (line break) cioè la necessità di andare "a capo". Vedi anche <p>...</p>.

`<button>...</button>`

Gli elementi <button> consentono di introdurre dei pulsanti nella pagina Web analogamente a <input type="button">.
L'elemento considerato si differenzia dall'elemento <input> poiché consente di controllare la formattazione grafica dei testi riportati sul cappellotti dei pulsanti (vedi esempio sottostante).
Si osservi che anche l'elemento <button> è dotato dell'attributo type, nel caso specifico sono supportati i valori: button, submit e reset.
Vedi anche Elementi <input> & <form>.

<button>Questo è un <span style="font-weight: bold; color: red;">pulsante</span>...</button>

`<canvas>...</canvas>`

Gli elementi <canvas> consentono di allocare dei "contenitori" per delle bitmap utilizzabili per dipingere sullo schermo utilizzando delle procedure grafiche scritte in JavaScript.

<canvas id="Id_Canvas" width="300" height="300" style="border:1px solid"> Your browser does not support the canvas tag. </canvas> <script> var Elem0 = document.getElementById("Id_Canvas"); var ctx = Elem0.getContext("2d"); ctx.fillStyle = "#FF00FF"; ctx.fillRect(100, 100, 100, 150); </script>

`<caption>...</caption>`

Gli elementi <caption> consentono associare una didascalia alle tabelle.

<table border="1">

                          <caption>Spese Mensili</caption>

                          <tr>

                            <th>Mese</th>

                            <th>Spese</th>

                          </tr>

                          <tr>

                            <td>Gennaio</td>

                            <td>100€</td>

                          </tr>

                          <tr>

                            <td>Febbraio</td>

                            <td>50€</td>

                          </tr>

                        </table>

Spese Mensili
Mese	Spese
Gennaio	100€
Febbraio	50€

`<cite>...</cite>`

Gli elementi <cite> denotano delle citazioni, per finalità semantiche.

<cite>Nel mezzo del cammin di nostra vita...</cite>

Nel mezzo del cammin di nostra vita...

`<code>...</code>`

Gli elementi <code> sono impiegati per evidenziare quei i frammenti di codice programma inseriti nelle pagine HTML a titolo di esempio.

<code>code</code> code

<col>...</col>

Il tag <col> consente di specificare gli stili di una colonna, di una tabella, per ogni colonna all'interno di un elemento <colgroup>.
Il tag <col> permette di definire gli stili una volta per tutte evitando di ripetere la definizione delle proprietà per ogni cella di ogni riga.

NOTA:
Si osservi che <col> supporta solo quattro proprietà CSS: border, background, width e visibility (vedi https://www.w3.org/TR/CSS2/tables.html#columns); tutte le altre proprietà debbono essere gestite ricorrendo ai CSS.

Esempio:

#myTable tbody td { text-align: center }

                #myTable tbody td:first-child { text-align: left }

<table>
  <colgroup>
    <col style="background-color:yellow;" span="2">
    <col style="background-color:cyan;">
  </colgroup>
  <tbody>
    <tr>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Voto</th>
    </tr>
    <tr>
      <td>Mario</td>
      <td>Rossi</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Anna</td>
      <td>Bianchi</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

Nome	Cognome	Voto
Mario	Rossi	7
Anna	Bianchi	8

<colgroup>...</colgroup>

Il tag <colgroup> definisce un gruppo di una o più colonne, di una tabella, cui si desidera attribuire le stesse caratteristiche stilistiche.
Il tag <colgroup> permette di definire gli stili una volta per tutte evitando di ripetere la definizione delle proprietà per ogni cella di ogni riga.
NB: l'elemento <colgroup> deve seguire immediatamente il tag <table> precedendo ogni altro elemento <thead>, <tbody>, ecc.

 <style>
.myclass {
background-color:yellow;
width:33%;
}
</style>
" " " " " " "
<table>
  <colgroup> 
     <col class="myclass" span="3">
  </colgroup>
  <tbody>
    <tr>
      <th>Nome</th>
      <th>Cognome</th>
      <th>Voto</th>
    </tr>
    <tr>
      <td>Mario</td>
      <td>Rossi</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Anna</td>
      <td>Bianchi</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

Nome	Cognome	Voto
Mario	Rossi	7
Anna	Bianchi	8

`<data>...</data>`

Gli elementi <data> consentono di associare dei dati (leggibili dai bot) a particolari ad un qualsiasi elemento HTML. Utilizzato per finalità semantiche.

<ul>

                          <li><data value="101">Vaniglia</data>...</li>

                          <li><data value="102">Pistacchio</data>...</li>

                          <li><data value="103">Fragola</data>...</li>

                        </ul>

Vaniglia
Pistacchio
Fragola

`<datalist>...</datalist>`

Gli elementi <datalist> estendono le funzionalità degli elementi <input> consentono di associare ad essi una lista di opzioni predefinite.
Il collegamento fra la <datalist> fra i due elementi si stabilisce introducendo nell'elemento <input> l'attributo list cui verrà attribuito come valore l'id dell'elemento <datalist> associato.
Dal punto di vista operativo gli elementi <datalist> si attivano automaticamente nel momento in cui l'utente comincia a scrivere nella casella corrispondente all'elemento <input> associato, cliccando la frecciolina verso il basso o digitando il primo carattere.
Nel primo caso generalmente si aprirà la lista completa delle opzioni possibili, nel secondo l'elenco delle opzioni aventi come prefisso i caratteri che già sono stati digitati.
Date queste premesse per vedere la lista completa dei suggerimenti è necessario cancellare tutto ciò che si è scritto nella casella di input.

<input type="text" id="Id_Disney0" list="Id_LiDisney0" placeholder="Pippo"> <datalist id="Id_LiDisney0"> <option value="Pippo"selected="selected">Pippo</option> <option value="Topolino">Topolino</option> <option value="Minnie">Minnie</option> <option value="Paperino">Paperino</option> </datalist>

Qualora la lista dei suggerimenti si limitasse ad una sola voce potrebbe essere più conveniente utilizzare l'attributo placeholder.
Si osservi che quest'ultimo consente di fornire un suggerimento, che però richiederà l'intervento dell'utente che dovrà confermare la sua accettazione riscrivendolo!
I placeholder non sono dei default. Volendo proporre dei valori di input di default bisogna ricorrere all'attributo value.
Vedi anche <select>.

`<del>...</del>`

Gli elementi <del> sono usati generalmente in combinazione con gli elementi <ins>...</ins>, per finalità semantiche, allo scopo di evidenziare le variazioni introdotte in un testo mostrando la situazione prima e dopo le modifiche.
La semplice presenza di una porzione di testo obsoleta può invece essere evidenziata per mezzo del tag <s>...</s>.

Ti <del>amo</del> <ins>odio</ins>!

Ti ~~amo~~ odio!

`<details>...</details>`

Gli elementi <summary>...</summary> vengono utilizzati in combinazioni con gli elementi <details>...</details>.. allo scopo di creare delle porzioni di testo a scomparsa, cioè normalmente nascoste, fatto salvo per un breve riassunto contenuto all'interno degli elementi <summary>...</summary>, che però possono essere espanse cliccando sul segno corrispondente al triangolino.

<details>

                        <summary style="color:red;">Cliccare sul triangolino per espandere il testo</summary>

                        Il testo "a scomparsa" normalmente nascosto può essere espanso cliccando sul triangolino.

                        </details>

Cliccare sul triangolino per espandere il testo

Il testo "a scomparsa" normalmente nascosto può essere espanso cliccando sul triangolino.

Gli elementi <details> vengono generalmente impiegati in sequenza per realizzare delle strutture di testo a fisarmonica (in inglese accordion), che consentono di risparmiare spazio nella pagina Web.

<details> 

                          <summary style="color:red;">Primo</summary> 

                          Testo Uno. 

                        </details>

                         " " " "

                        <details> 

                          <summary style="color:red;">Quarto</summary> 

                            Testo Quattro. 

                        </details>

Primo

Lorem ipsum dolor sit amet consectetuer eros Nam ullamcorper dui nibh. Egestas et vel nisl hac lorem nulla dui Praesent quis leo. Egestas facilisi convallis mauris dis tellus auctor Vestibulum mus a et. Ut nunc Pellentesque Pellentesque justo Curabitur consequat dictumst nunc nec tortor. Donec facilisi Mauris nunc tempor adipiscing dictum augue ante vel at. Faucibus nunc Maecenas velit tincidunt urna sociis ipsum id dignissim nibh. Nunc.

Secondo

Parturient pharetra tellus amet malesuada accumsan sagittis Aliquam volutpat quis nulla. Congue justo Nam laoreet feugiat pede cursus tempor pretium at justo. Vivamus convallis quis vitae Lorem ac mattis Ut leo justo tempus. Nibh et neque purus quis sed Aliquam tortor lacinia accumsan id. Id pellentesque mus eu augue amet urna et dictum consequat Lorem. Maecenas sodales Integer egestas eleifend dapibus mi nunc a risus purus. Phasellus.

Terzo

Sapien tellus id Vestibulum sollicitudin odio In wisi pede Curabitur velit. Mollis Curabitur nibh ipsum dui Vivamus tincidunt Nulla massa pretium elit. Accumsan nibh vel quis vestibulum elit justo nunc convallis iaculis magna. Ut convallis pede mauris ac elit a convallis enim auctor a. Ipsum eu eros sed pretium wisi Aenean et et aliquet enim. Cursus nibh est tellus magna Ut Ut dui diam lacinia libero. Et egestas.

Quarto

Nulla ac Curabitur elit consequat Aenean nibh Vestibulum porta Morbi Aenean. Facilisis eget Integer ultrices Curabitur tristique Aenean tincidunt velit facilisi Maecenas. Condimentum ut eleifend ac vel mus Vestibulum amet leo adipiscing tellus. Interdum elit Curabitur Nulla magna consectetuer Aenean in in consectetuer ac. Dignissim convallis condimentum leo Nulla massa Vestibulum quis Morbi at Vivamus. Tortor at Aenean Curabitur justo interdum rutrum urna nulla accumsan felis. Sagittis Duis condimentum.

Vedi: <summary>...</summary>.

`<dfn>...</dfn>`

Gli elementi <dfn> evidenziano le definizioni introdotte nel testo, per finalità semantiche.

<dfn>Nella geometria piana ? viene definito come il rapporto tra la lunghezza della circonferenza e il corrispondente diametro.</dfn> Nella geometria piana ? viene definito come il rapporto tra la lunghezza della circonferenza e il corrispondente diametro.

`<div>...</div>`

Gli elementi <div> sono usati come "contenitori" per organizzare i blocchi di testo dal punto di vista grafico e semantico.
I <div> acquisiscono le loro proprietà grafiche attraverso l'attributo style o i CSS.

`<dialog>...</dialog>`

Gli elementi <dialog> è stato introdotto allo scopo di facilitare lo sviluppo di finestre di dialogo (dialogue-box).
Sfortunatamente l'elemento è supportato da pochi browser (Chrome e Opera), per cui in alternativa si consiglia il ricorso all'attributo hidden.
NB: se l'elemento <dialog> è abilitato nel vostro browser la finestra di dialogo dovrebbe apparire nella colonna bianca a sinistra.

<dialog style="background-color:yellow;padding:20px;" open>Questa è una finestra di dialogo</dialog> Questa è una finestra di dialogo

L'elemento <dialog> differisce dagli altri elementi HTML poiché il suo impiego presuppone il ricorso ai metodi JavaScript appositamente introdotti per aprire e chiudere la finestra di dialogo:

`dialog.show();`	apre una finestra di dialogo
`dialog.showModal();`	apre una finestra di dialogo modale
`dialog.close();`	chiude la finestra di dialogo

Volendo prendere visione di un esempio più completo, vedi la pagina Web: dialog.htm sorgenti dialog.txt.

`<dd>...</dd>`

Gli elementi <dl> sono usati in combinazione con gli elementi <dd> e <dt> allo scopo di definire delle liste indentate.
i tag <dd> descrivono i termini o nomi definiti usando i tag <dt>.

`<dl>...</dl>`

Gli elementi <dl> sono usati in combinazione con gli elementi <dd> e <dt> allo scopo di definire delle liste indentate.
I tag <dt> definiscono dei termini o dei nomi e i tag <dd> descrivono i suddetti termini o nomi.
In altri termini i tag <dt> definiscono delle tipologie e i tag <dd> delle categorie più specifiche.

<dl>

                        <dt>Pastore</dt>

<dd>dei Pirenei</dd>
<dd>Scozzese</dd>



                            <dd>Tedesco</dd>

                          <dt>Gatto</dt>

                        <dd>Soriano</dd>

                        </dl>

Pastore: dei Pirenei; Scozzese; Tedesco
Gatto: Soriano

`<dt>...</dt>`

Gli elementi <dl> sono usati in combinazione con gli elementi <dd> e <dt> allo scopo di definire delle liste indentate.
I tag <dt> definiscono dei termini o dei nomi.

<dl>

                        <dt>Pastore</dt>

<dd>dei Pirenei</dd>
<dd>Scozzese</dd>



                            <dd>Tedesco</dd>

                          <dt>Gatto</dt>

                        <dd>Soriano</dd>

                        </dl>

Pastore: dei Pirenei; Scozzese; Tedesco
Gatto: Soriano

`<em>...</em>`

Gli elementi <em> vengono impiegati per enfatizzare (empathize) i testi stampandoli in corsivo (italic).
Dal punto di vista grafico il risultato è simile a quello che si ottiene ricorrendo ai tag <i>..</i>.
Scrivendo pagine HTML-5, volendo evidenziare un testo usando il corsivo, si suggerisce di limitare i ricorso ai tag <i>..</i>, poiché questi ultimi hanno una valenza prettamente grafica, dando la preferenza ai tag <em>...</em>.

`<i>italic</i>`	italic
`<em>em</em>`	em

`<embed>`

L'elemento <embed>viene impiegato come "contenitore" per un plug-in o un applicazione esterna.
Un caso tipico è costituito dal ricorso all'elemento <embed> allo scopo di includere all'interno di una pagina Web un'immagine rappresentata in un formato non standard, cioè in un formato normalmente non supportato dai browser (come il formato TIF o un tempo il formato SVG)

<embed src="Elementi_HTML_files/svg_logo.svg">

`<fieldset>...</fieldset>`

L'elemento <fieldset> consente di raggruppare un insieme di elementi (spesso elementi <input> di un form) circondandoli con un filetto.

<form>

                          <fieldset>

                            <legend>Login:</legend>

User Name: <input type="text"><br>

                            Password: <input type="password"><br>

                          </fieldset>

                        </form>

`<figcaption>...</figcaption>`

L'elemento <figcaption> individua la didascalia di una illustrazione (vedi esempio in <figure>).

`<figure>...</figure>`

L'elemento <figure> permette di raggruppare tutti gli elementi HTML attinenti ad una illustrazione o una risorsa multimediale comprese le didascalie ed eventuali bordi.

<figure class="Cl_Center"> 

                        <img src="Elementi_HTML_files/calcolatrice_XP.jpg"> <figcaption>Figura 3 - La calcolatrice di Windows-XP</figcaption> 

                        </figure>

Figura 3 - La calcolatrice di Windows-XP

`<footer>...</footer`>

L'elemento <footer> solitamente individua il blocco di testo posto in fondo alla pagina Web. Blocco che solitamente contiene il Copyright, il nome degli sviluppatori, eccetera. Vedi Figura 1.

`<form>...</form`>

L'elemento <form> viene utilizzato come contenitore allo scopo di creare un modulo di input HTML.
L'elemento <form> tipicamente conterrà uno o più dei seguenti elementi:

<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>.

Vedi Input elements & Form.

frame

L'utilizzo di tag frame è assolutamente sconsigliato poiché sono stati dichiarati obsoleti anche se alcuni browser continuano a supportarli per questioni di compatibilità; si consiglia di ricorrere invece agli <iframe>.

Esempio: prova_frame.html prova_frame.txt

frameset

L'utilizzo di tag frameset è assolutamente sconsigliato poiché sono stati dichiarati obsoleti anche se alcuni browser continuano a supportarli per questioni di compatibilità; si consiglia di ricorrere invece agli <iframe>.

`<h1>...</h1>`

Gli elementi <h1>..<hn> consentono di applicare ad un testo di una o più righe gli stili dei titoli (header).

<h1>Heading-1 (Times-24)</h1>

                      <h2>Heading-2 (Times-18)</h2>

                      <h3>Heading-3 (Times-14)</h3>

                      <h4>Heading-4 (Times-12)</h4>

                      <h5>Heading-5 (Times-10)</h5>

                      <h6>Heading-6 (Times-8) </h6>

Heading-1 (Times-24)

Heading-2 (Times-18)

Heading-3 (Times-14)

Heading-4 (Times-12)

Heading-5 (Times-10)

Heading-6 (Times-8)

`<head>...</head>`

Gli elementi <head> e <body> suddividono le pagine HTML in due sezioni denominate rispettivamente testa (<head>) e corpo (<body>).
I tag <head>...</head> definiscono un contenitore utilizzato per includere tutti gli elementi di testa ed in particolare: l'elemento <title>, i metadati (elementi <meta>) e l'elemento <style>. Vedi anche <body>...</body>.

`<header>...</header>`

L'elemento <header> da non confondere con l'elemento <head> individua il blocco, solitamente posto in alto all'inizio della pagina Web, che costituisce l'intestazione della pagina Web. Blocco che solitamente contiene il nome del sito Web, il logo, eccetera. Vedi Figura 1.

`<hr>`

L'elemento <hr> visualizza una linea orizzontale utilizzabile per spezzate il testo in sezioni distinte.

prima<hr>dopo

prima

dopo

`<html>...</html>`

I tag <html>...</html> svolgono tre funzioni:

informano i browser che il documento esaminato è una pagina HTML,
rappresentano la radice (root) del DOM,
assolvono la funzione di "contenitore" per tutti gli elementi HTML, con la sola eccezione del tag <!DOCTYPE>.

L'elemento <html> è suddiviso in due sezioni corrispondenti all'elemento <head> e all'elemento <body> che corrispondono rispettivamente all'intestazione (dichiarazione dei metadati) e al testo del documento vero e proprio.

<!DOCTYPE html>

              <html lang="it">

                <head>

                  <meta content="text/html; charset=utf-8" http-equiv="content-type">

                  <title>...</title>

                  <meta content="Luigi D. CAPRA" name="author">

                  <meta content="BlueGriffon wysiwyg editor" name="generator">

                </head>

                <body>

                  <p><br>

                  </p>

                </body>

              </html>

`<i>...</i>`

Gli elementi <i>, di cui ora si sconsiglia l'uso, venivano un tempo impiegati per evidenziare quei testi che si desiderava stampare in corsivo (italic). Oggi si suggerisce di usare gli elementi <em>...</em>.

`<i>italic</i>`	italic
`<em>em</em>`	em

`<iframe>..</iframe>`

Gli elementi <iframe>..</iframe> consentono di includere (embed) un altro documento (eventualmente in'altra pagina HTML) all'interno della pagina HTML corrente.
Gli <iframe> sostituiscono gli elementi <frame> che sono stati dichiarati obsoleti perché presentavano dei problemi di sicurezza.

`<img>...</img>`

Gli elementi <img> consentono di introdurre delle immagini all'interno delle pagine HTML.
Gli elementi <img> sono caratterizzati da due attributi obbligatori src e alt, il primo dei quali permette di indicare la URL corrispondente alla immagine che si desidera visualizzare, mentre il secondo consente di specificare un testo da mostrare nel caso in cui l'immagine cui si fa riferimento non sia disponibile (perché non può essere letta o è di formato incompatibile).

<img alt="testo alternativo" src="immagine1.jpg">

`<input>`

Gli elementi <input> denotano le caselle di input presenti negli elementi <form>.

Attributi dell'elemento `<input>`

type:	individua la tipologia di input fra le varie possibilità previste.
disabled:	Abilita/Disabilita la possibilità di introdurre dei valori nella corrispondente casella.
max:	Consente di specificare il valore massimo valore ammissibile.
maxlength:	Consente di specificare il massimo numero di caratteri per il campo di input.
min:	Consente di specificare il valore minimo valore ammissibile.
pattern:	Consente di specificare una espressione regolare utilizzabile per la convalida del valore di input.
readonly:	Indica che il valore visualizzato non può essere modificato.
required:	Indica che il campo considerato deve essere obbligatoriamente riempito dall'utente.
size:	Specifica la dimensione in caratteri del campo di input.
step:	Specifica il passo di incremento/decremento del campo di input utilizzato in combinazione con le frecce.
value:	Specifica il valore di default per la casella considerata.
placeholder:	Consente di fornire un suggerimento circa il valore da inserire. NB: il suggerimento DEVE essere riscritto!

I tipi dell'elemento `<input>`

NB: poiché il W3C ha lasciato l'implementazione dei vari tipi di <input> alla discrezione degli sviluppatori dei browser, l'aspetto grafico dei campi di input può cambiare sensibilmente da un browser all'altro.

Esempio	Type	Note
	text
	search
	tel
	url
	file
	email
	password
	date	date nel formato gg/mm/anno (es. `12/09/2022`)
	time	ora nel formato hh:mm (es. `11:06`)
	datetime	OBSOLETO! - invece di `datetime` usate `datetime-local`
	month	mese dell'anno nel formato mese anno (es: `settembre 2022`)
	week	settimana dell'anno (1..52) (es. settimana `22, 2022`)
	datetime-local	giorno e ora (es. `12/09/2022 11:06`)
	hidden	NON si vede, ma a nella casella di sinistra è presente un campo di input di tipo "hidden", cioè nascosto. I campi "hidden" possono essere impiegati nei `<form>` per passare dei dati al server senza che questi siano visibili all'operatore.
	button
	submit
	reset
	number	number/color picker I campi di input numerici NON ritornano un numero ma una stringa per cui il valore deve essere convertito in un intero o in un numero reale utilizzando i metodi opportuni.
	range
	color
Rosso Verde Blu	radio	I radio button che condividono lo stesso attributo "name" sono collegati assieme; pertanto consentono di selezionare, al più una, voce. Si osservi che è possibile che non ci sia alcuna voce selezionata! Questa condizione anomala ma può essere sfruttata per evidenziare il fatto che l'utente non ha ancora risposto. Nel caso dei radio button è indispensabile impostare l'attributo value di ogni elemento `<input>` in modo che si possa attribuire un valore alla variabile corrispondente al name quando il `<form>` viene inviato. Nel caso dei radio button il valore di default (cioè il pallino in uno dei cerchietti) si imposta settando l'attributo checked del corrispondente elemento `<input>`.
Rosso Verde Blu	radio
alto largo	checkbox	Le check box (caselle di spunta) sono indipendenti; i quadratini possono pertanto essere marcati individualmente.
alto - largo
	image	Un bottone con un'immagine come effige.
Elementi assimilabili a `<input>`
	button	Mostra un bottone
	select	Viene mostrata una sola voce perché l'attributo size="1"
	select	Vengono mostrate tre voci perché l'attributo size="3"
	datalist	Estende le funzionalità di `<input>` consentendo la scelta fra una lista di opzioni.
Questo è un testo di prova	textarea	Gli elementi <textarea> possono essere impiegati per introdurre o editare pagine di testo
Attributi particolari
	`size`	`size="50"`
	`size`	`size="5"`
Login name	`required`	`required="required"`
Codice Cliente	`readonly`	`readonly="readonly"`
Opzione Disab.	`disabled`	`disabled="disabled"`
Nome	`autocomplete`	`autocomplete="on"`
Nome	`autocomplete`	`autocomplete="off"`
	`min, max`	`min="0" max="10"`
	`step`	`min="0" max="10" step="3"`
	`placeholder`	`placeholder="First name"` l'attributo `placeholder` consente di fornire dei suggerimenti
Country code:	`pattern`	`pattern="[A-Za-z]{3}"`
Select images:	`multiple`	l'attributo multiple consente di assegnare più valori alla stessa voce. Attualmente funziona solo in combinazione con i tipi `file` e `email`.
Nome (max 10ch):	`maxlength`	`maxlength="10"`
	`autofocus`	L'attributo `autofocus` fa sì che il campo corrispondente risulti selezionato automaticamente (pronto per essere modificato) al termine del caricamento della pagina Web. Cliccare sul link per vedere l'effetto: esempio autofocus
	`list`	Consente di abbinare una `<datalist>` all'elemento <input>.

`<ins>...</ins>`

Gli elementi <ins> sono usati generalmente in combinazione con gli elementi <del>...</del>, per finalità semantiche, allo scopo di evidenziare le variazioni introdotte in un testo mostrando la situazione prima e dopo le modifiche.
La semplice presenza di una porzione di testo obsoleta può invece essere evidenziata per mezzo del tag<s>...</s>.

Ti <del>amo</del> <ins>odio</ins>! Ti ~~amo~~ odio!

<kbd>..</kbd>

Gli elementi <kbd> denotano il testo che dovrebbe essere introdotto da tastiera. Si sconsiglia l'impiego dei tag <kbd>.

<kbd>testo che dovrebbe essere digitato</kbd> testo che dovrebbe essere digitato

`<label>...</label>`

Etichette di input.
Gli elementi <label> estendono e complementano i corrispondenti elementi di <input> facilitandone la selezione.
Associando un elemento <label> ad un particolare elemento <input> è possibile selezionare la casella di input cliccando indifferentemente su quest'ultima o sulla corrispondente etichetta (<label>).
Si osservi che:

gli elementi <label> sono generalmente indistinguibili dal normale testo (salvo il ricorso a regole di stile);
è possibile associare più elementi <label> allo stesso elemento di <input>;
gli elementi <label> non debbono essere necessariamente contigui agli elemento di <input> cui sono associati.

Il legame fra etichette e caselle di input si stabilisce assegnando all'attributo for degli elementi <label> il valore dell'id che contraddistingue la casella di input considerata.

<form action="/action_page.php">

                      <label for="uomo">Male</label>

                      <input type="radio" name="genere" id="uomo" value="male"><br>

                      <label for="donna">Female</label>

                      <input type="radio" name="genere" id="donna" value="female"><br>

                      <input type="submit" value="Submit">

                      </form>

`<legend>...</legend>`

Gli elementi <legend> consentono di associare una didascalia, o meglio un piccolo titolo, agli elementi <fieldset>.

<form>

                        <fieldset>

                          <legend>Login:</legend>

User Name: <input type="text"><br>

                          Password: <input type="password"><br>

                        </fieldset>

                      </form>

`<li>...</li>`

Gli elementi <li> denotano le voci elencate nelle liste.
Gli elementi <li> possono essere impiegati in combinazione con le liste ordinate (ordered list <ol>) e non ordinate (un-ordered list <ul>).

ordinato<br>

                      <ol>

                        <li>primo</li>

                        <li>secondo</li>

                        <li>terzo</li>

                      </ol>

                      <br>

                      non ordinato<br>

                      <ul>

                        <li>verde</li>

                        <li>bianco</li>

                        <li>rosso</li>

                      </ul>

ordinato

primo
secondo
terzo

non ordinato

verde
bianco
rosso

Vedi anche <ol>...</ol> e <ul>...</ul>.

`<link>...</link>`

Gli elementi <link>...</link> stabiliscono un collegamento (link) fra il documento considerato e una risorsa esterna; tipicamente una pagina CSS o il file contenente un'icona.

Esempio:

<link rel="stylesheet" href="../res/rlcd.css">

              <link rel="shortcut icon" href="../res/favicon.ico">

`<main>...</main>`

L'elemento <main> individua il contenuto principale di una pagina Web. Considerazioni analoghe valgono per i ruoli ARIA (ARIA roles).
Nel suddetto contesto il landmark <main> individua il contenuto principale di un documento di interesse per l'utente.

Il contenuto all'interno dell'elemento <main> idealmente dovrebbe essere univoco.
All'interno di un documento HTML ci può essere al più un <main> e questo non deve cioè contenere contenuti stereotipati, cioè componenti, che si desidera riutilizzare in altri documenti come: barre laterali (aside), barre di navigazione (nav), eccetera.
Non si può includere più di un elemento <main> per ciascun documento.
Facendo riferimento al DOM, l'elemento <main> NON può essere discendente di alcuno degli elementi: <article>, <aside>, <nav>, <footer>, <header> (cioè non può essere "contenuto" al loro interno).

`<map>...</map>`

Gli elementi <map>...</map> consentono di definire una mappa-immagine (image-map) lato client, cioè di associare una mappa cliccabile ad una immagine definendo un insieme di aree sensibili.
Ancora una volta per stabilire una relazione fra l'immagine e la mappa si ricorre agli attributi facendo coincidere l'attributo name dell'elemento <map> coincidente con l'attributo usemap della corrispondente

<img>.

Molto popolari fino ad una decina di anni fa, gli elementi <map>...</map> stanno oggi cadendo in disuso a favore di tecniche basate sull'utilizzo delle immagini in formato SVG, che consentono di ottenere risultati molto più spettacolari ed efficaci.
Vedi anche <area>...</area>.

`<mark>...</mark>`

Gli elementi <mark> denotano quegli elementi che debbono essere evidenziati come se si fosse usato il pennarello evidenziatore.

<mark>Mark</mark> Mark

`<menu>...</menu>`

Gli elementi <menu>...</menu> definiscono l'elenco delle voci di un menu di comandi.
Il tag <menu> ha avuto un curioso destino: dichiarato obsoleto una decina di anni fa è stato poi "ripescato" e ridefinito in modo diverso. Attualmente l'elemento <menu> viene usato per i menu contestuali, le barre degli strumenti e per elencare i controlli e i comandi del modulo.

<div style="background:yellow;border:1px solid yellow; padding: 10px;"

                        contextmenu="mymenu">

                        <p>Cliccando nell'area evidenziata in giallo con il tasto <span style="font-weight: bold;">destro </span>del 

                        <spanstyle="font-style: italic;">mouse </span>vedrete aprirsi un menu arricchito di funzionalità aggiuntive.</p>

                        <menu type="context" id="mymenu">

                          <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">

                        </menuitem>

                        <menu label="Share on...">

                          <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);">

                          </menuitem>

                          <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);">

                          </menuitem> </menu>

                          <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;">

                          </menuitem>

                        </menu>

                      </div>

Cliccando nell'area evidenziata in giallo con il tasto destro del mouse vedrete aprirsi un menu arricchito di funzionalità aggiuntive.

NB: attualmente gli elementi <menu> sono supportati solo da Mozilla Firefox.

`<menuitem>...</menuitem>`

Gli elementi <menuitem>...</menuitem> denotano le voci (item) dei popup menu invocabili cliccando con il tasto destro del mouse su di particolari aree. Vedi <menu>...</menu>.

`<meta>...</meta>`

Gli elementi <meta> consentono di associare dei metadati alla pagina Web; questi ultimi sono individuati in base al loro nome
ovvero al valore dell'attributo name; al metadato specificato verrà assegnato il valore dell'attributo content.
Ad esempio l'elemento:
<meta content="scheda_prodotto, Fiat Panda" name="keywords">
Assegna le chiavi "scheda_prodotto" e "Fiat Panda" al metadato "keywords" allo scopo di facilitare il lavoro dei motori di ricerca.

`<meter>...</meter>`

L'elemento <meter> è stato introdotto allo scopo di essere utilizzato come indicatore per visualizzare una misura generica.
Nel caso in cui si volesse visualizzare lo stato di avanzamento di un processo si consiglia di utilizzare l'elemento <progress>.

<meter optimum="70" min="0" max="100" value="35"> </meter>

`<nav>...</nav>`

L'elemento <nav> individua solitamente il blocco corrispondente ai menu ovvero dalle liste delle voci che consentono di navigare all'interno delle pagine che costituiscono il sito Web. Vedi Figura 1.
Si osservi che l'elemento <nav> può essere disposto sia in orizzontale (come in Figura 1) che in verticale in maniera analoga agli elementi aside.

`<noscript>...</noscript>`

Gli elementi <noscript> consentono di introdurre un testo alternativo da visualizzare nel caso in cui gli utenti abbiano disabilitato JavaScript o nel caso in cui il browser impiegato non lo supporti.
L'elemento <noscript> può essere utilizzato sia all'interno di <head> che nel <body>.

<noscript><b>JavaScript is disabled in your browser.</b>...</noscript>

NOTA: per sperimentare il funzionamento del tag <noscript></noscript> provate ad inserire il seguente testo

<noscript><b>JavaScript is disabled in your browser.</b>...</noscript>

nei sorgenti di una pagina HTML editata con BlueGriffon.

`<object>...</object>`

Gli elementi <object>...</object> consentono di includere degli "oggetti" (risorse o altri documenti) all'interno delle pagine HTML. In particolare il tag <object> può essere utilizzato per incorporare contenuti multimediali (come audio, video, applet Java, ActiveX, PDF e Flash) nelle pagine Web.
Il tag <object> può anche essere impiegato per incorporare altre pagina web nel documento HTML.
Nel caso in cui fosse necessario passare dei parametri al documento integrato, tale risultato può essere ottenuto ricorrendpo agli elementi <param>...</param>.

`<ol>...</ol>`

Gli elementi <ol>...</ol> permettono di includere delle liste ordinate all'interno della pagina Web.
Le liste possono essere ordinate numericamente o alfabeticamente.
Vedi anche <li>...</li> e <ul>...</ul>.

`<optgroup>...</optgroup>`

Gli elementi <optgroup>...</optgroup> vengono impiegati all'interno degli elementi <select>...</select> allo scopo di consentire l'aggregazione delle opzioni (<option>...</option>) permettendo la creazione di liste strutturate su più livelli.
Vedi anche: <option>...</option> e <select>...</select>..

<select name="Nm_Color3" size="1"> <optgroup label="Colori caldi"> <option>Rosso </option>
<option>Giallo </option>
<option>Arancio</option>
</optgroup><optgroup label="Colori freddi"> <option>Verde </option> <option>Blue </option> <option>Viola</option>
</optgroup> </select>

`<option>...</option>`

Gli elementi <option>...</option> specificano le opzioni offerte dagli elementi <select>...</select>.
Vedi anche: <optgroup>...</optgroup> e <select>...</select>.

<select name="Nm_Color2" size="1"> <option selected="selected" value="0">Bianco </option> <option value="1">Rosso </option> <option value="2">Verde </option> <option value="3">Blue </option> <option value="4">Giallo </option> <option value="5">Nero </option> </select>

`<output>...</output>`

L'elemento <output> visualizza il valore della variabile associata al suo variare.

<form oninput="Id_02.value=parseInt(Id_00.value)+parseInt(Id_01.value)">0

                        <input id="Id_00" min="0" max="100" value="50" type="range"> + 

                        <input id="Id_01" min="0" max="100" value="50" type="number"> = 

                        <output name="Id_02">...</output>

                      </form>

`<p>...</p>`

L'elemento paragraph <p> individua i paragrafi intesi come linee di testo non interrotte da punti. Dovrebbe pertanto essere uno degli elementi più comuni nelle pagine HTML-5, anche se molti continuano a limitarsi a marcare il fine riga con il tag di "a capo" <br>.
La differenza fra i tag <br> e <p> consiste nel fatto che il primo si limita a segnalare la necessità di andare a capo per fini grafici mentre il secondo delimita logicamente i paragrafi. Vedi anche <br>.

NOTA:
secondo le specifiche di HTML 5.2 gli elementi <p> dovrebbero contenere al loro interno solo frasi di testo (phrasing content),
conseguentemente, non è più consentito includere elementi blocco (block elements) come figli degli elementi <p>,
pertanto codici come i seguenti debbono essere considerati errati.

<p>
<div>...</div>
</p>

<p>
<table>
</table>
</p>

NOTA:
Circa il ricorso ai tag <br> in alternativa agli elementi <p> si osserva che mentre i primi indicano semplicemente la richiesta (ovvero il comando) di andare "a capo" i secondi hanno una valenza semantica poiché delimitano una frase di senso compiuto, conseguentemente il ricorso agli elementi <p></p> è da preferire poiché facilitano il lavoro degli agenti (bot).
Si osservi che gli elementi <p></p> richiedono l'inserimento di un opportuno insieme di regole CSS per adeguare la gestione dei margini alle esigenze del contesto.
Ad esempio:

p { 
  margin-bottom: 0%; 
  margin-top: 0%;
}

`<param>`

Gli elementi <param> vengono comunemente utilizzati in combinazione con gli elementi <object>...</object> allo scopo di passare dei parametri ai plug-in integrati.

<object data="horse.wav">
  <param name="autoplay" value="true">
</object>

`<picture>...</picture>`

Gli elementi <picture> sono stati introdotti in HTML-5 allo scopo di offrire un controllo più fine sulle immagini presenti usate nelle pagine.
Il tag considerato consente di implementare una gestione reattiva delle immagini, mostrando versioni alternative delle stesse al variare delle dimensioni della finestra del browser. Affinché ciò sia possibile l'elemento <picture> dovrà contenere uno o più elementi <source> e un elemento <img>.

Il tag <img> verrà utilizzato solo se le dimensioni del viewport non corrispondono a nessuno dei valori specificati negli elementi <source> o se il browser non le supporta.

<picture> <source media="(min-width: 968px)" srcset="large_img.jpg"> <source media="(min-width: 360px)" srcset="small_img.jpg"> <img src="default_img.jpg" alt="no image available"> </picture>

`<pre>...</pre>`

Gli elementi <pre> denotano i testi preformattati (ovvero formattati per mezzo dei normali caratteri ASCII di controllo).
Il testo degli elementi <pre> viene visualizzato in un font a larghezza fissa (tipicamente Courier) allo scopo di conservare l'allineamento delle colonne dei caratteri e i fine riga.

<pre>

                      mele&#9;&#9;1,5  kg  1,75

                      prosciutto&#9;1,0  hg  1,20

                      mortadella&#9;2,0  hg  2,00

                      pane comune&#9;2,5  kg  3,20

                      

                      totale&#9;&#9;&#9; 8,15

                      </pre>

mele		1,5  kg  1,75
prosciutto	1,0  hg  1,20
mortadella	2,0  hg  2,00
pane comune	2,5  kg  3,20

totale			 8,15

NOTA:
I testi inseriti all'interno di una coppia di tag <pre>...</pre> vengono resi come apparirebbero se fossero esaminati con un comune text-editor, per cui non è necessario inserire <br> al fondo delle righe poiché basta il LF.
L'eventuale presenza di <br> all'interno del blocco di testo all'interno di una coppia di tag <pre>...</pre> comporta l'inserimento di "a capo" supplementari, probabilmente indesiderati.
Ad esempio

<pre>

                      1

                      2 "a capo indesiderato"<br>

                      3

                      </pre>

1
2 "a capo indesiderato"

3

La tabella sottostante illustra il modo in cui vengono resi alcuni dei codici di controllo ASCII più comuni.

codice ASCII	HTML Entity	Nome ASCII	Azione
0x09		HT/ tab	il tab viene espanso come una sequenza di otto spazi
0x20		blank	il Non-breaking Space viene espanso come un singolo spazio
0x0a		LF	Line Feed - sposta il cursole all'inizio della riga sottostante.
0x0d		CR	Carriage Return - sposta il cursore all'inizio della riga corrente.

NOTA:
Volendo introdurre in una pagina HTML un codice di controllo non stampabile o un carattere ASCII o UniCode non supportato dal text-editor si può ricorrere alla codifica:

&#nn;

dove nn è la rappresentazione decimale di un carattere ASCII o di un codice UniCode.

Esempio:

Rappresentazione &#nn; codice ASCII o UniCode	Carattere visualizzato
A	A
α	α
丐	丐

`<progress>...</progress>`

L'elemento <progress> può essere usato per indicare lo stato di avanzamento di un processo (ad esempio il caricamento di un file).

<progress form="100" max="100" value="70"> </progress>

`<q>...</q>`

L'elemento <q> evidenzia una citazione corta.
Nel caso di citazioni lunghe si suggerisce di usare <blockquote>...</blockquote>.

<q>In quel ramo del lago di Como...</q> In quel ramo del lago di Como...

`<rp>...</rp>`

L'elemento <rp>...</rp> evidenzia un'annotazione Ruby priva di parentesi.
Vedi <ruby>...</ruby>.

`<rt>...</rt>`

L'elemento <rt>...</rt> definisce una precisazione circa la pronunzia dei caratteri di una citazione in giapponese.
Vedi <ruby>...</ruby>.

`<ruby>...</ruby>`

L'elemento <ruby>...</ruby> evidenzia la presenza di un'annotazione Ruby.
Usato per commentare le pagine Web in giapponese.

`<s>...</s>`

Gli elementi <s> (strikethrough) consentono di evidenziare quelle frasi o porzioni di testo che non sono più rilevanti, accurate, oppure che sono diventate obsolete. il tutto per finalità semantiche,
Nel caso in cui si desideri evidenziare i cambiamenti introdotti nel testo mostrando la situazione prima e dopo si consiglia di avvalersi dei tag <del>...</del> e <ins>...</ins>.

<s>testo obsoleto</s> ~~testo obsoleto~~

`<samp>...</samp>`

Gli elementi <sample>...</sample> consentono di evidenziare, per finalità semantiche, porzioni dell'output di un'applicazione introdotte all'interno della pagina Web a titolo di esempio.
Si veda anche <kbd>...</kbd> per quanto concerne l'input da riga di comando e <code>...</code> circa il codice sorgente.

<samp>Microsoft Windows [Versione 10.0.15063] (c) 2017 Microsoft Corporation. Tutti i diritti sono riservati. D:\>dir Il volume nell'unità D è DATA Numero di serie del volume: E072-28B1 Directory di D:\ 01/12/2017 15:38 <DIR> . 01/12/2017 15:38 <DIR> .. 18/08/2015 16:48 13.889 horse.ogg 02/12/2017 10:17 12.437 html_org.svg 01/12/2017 15:35 1.604 svg_logo.svg 21/11/2017 14:24 20.326 video.jpg 18/08/2015 17:49 788.493 video.mp4 5 File 836.749 byte 2 Directory 187.405.848.576 byte disponibili D:><samp> Microsoft Windows [Versione 10.0.15063] (c) 2017 Microsoft Corporation. Tutti i diritti sono riservati. D:\>dir Il volume nell'unità D è DATA Numero di serie del volume: E072-28B1 Directory di D:\ 01/12/2017 15:38 . 01/12/2017 15:38 .. 18/08/2015 16:48 13.889 horse.ogg 02/12/2017 10:17 12.437 html_org.svg 01/12/2017 15:35 1.604 svg_logo.svg 21/11/2017 14:24 20.326 video.jpg 18/08/2015 17:49 788.493 video.mp4 5 File 836.749 byte 2 Directory 187.405.848.576 byte disponibili D:>

`<script>...</script>`

Gli elementi <script>...</script> sono dei "contenitori" utilizzati per inglobare dei frammenti di codice (tipicamente JavaScript).
Gli elementi <script> permettono sia di includere direttamente il codice programma che di far riferimento ad un file esterno contenente i sorgenti delle routine cui si fa riferimento.
Nel primo caso (ricorrendo a codice Javascript) la sintassi è molto semplice in quanto basta scrivere il codice desiderato fra i tag.
Ad esempio:

<script type="text/javascript">

              alert("Questo finestra viene visualizzata usando JavaScript.");

              </script>

Nel secondo caso si farà ricorso all'attributo src per forzare il caricamento della pagina di codice specificata come valore.
Ad esempio:
<script type="text/javascript" src="my_script.js">...</script>

`<section>...</section>`

Le sezioni sono le unità di testo in cui è possibile scomporre un articolo (<article>).
Le sezioni sono normalmente intese come unità di testo dotate di una semantica interna coerente ed auto sufficiente, per cui è consentito (al browser) spostarle all'interno della pagina senza che il significato del testo risulti compromesso (vedi Figura 1).

`<select>...</select>`

Gli elementi <select>...</select> sengono usati in combinazione con gli elementi <option>...</option> allo scopo di creare delle liste a discesa (drop-down list).

Vedi anche: <datalist>, <option>...</option> e <optgroup>...</optgroup>.

`<small>...</small>`

Gli elementi <small> denotano quelle porzioni di testo che debbono essere stampate con un carattere di forza minore (cioè più piccoli). Gli elementi <small> non sono più supportati da HTML-5 per cui se ne sconsiglia l'uso suggerendo di ricorrere ai CSS,

testo normale <small>small</small>

testo normale small

Vedi anche: <big>...</big>.

`<source>...</source>`

Gli elementi <source>...</source> consente di specificare più risorse per gli elementi multimediali, come <video>, <audio> e <picture>.
Ricorrendo al tag <source> si possono specificare file vide, audio o immagine alternativi tra i quali il browser può scegliere allo scopo di ottimizzare la presentazione grafica in funzione del tipo di supporto, dei codec o della tipologia di query multimediale.

<audio controls> <source src="mameli.ogg" type="audio/ogg"> <source src="mameli.mp3" type="audio/mpeg"> Il vostro browser non supporta gli elementi audio. </audio>

`<span>...</span>`

Gli elementi <span> sono usati come "contenitori" per raggruppare e organizzare frammenti di linea di testo dal punto di vista grafico e semantico. Gli elementi <span> acquisiscono le loro proprietà grafiche attraverso l'attributo style o i CSS.
Gli elementi <span> debitamente "decorati" con i corrispettivi attributi id

possono essere utilizzati come punti di aggancio per collegare delle porzioni di testo lineare generate dinamicamente.

`<strike>...</strike>`

Gli elementi <strike> consentono di barrare un testo a metà altezza.
Gli elementi <strike> non sono supportati da HTML-5. Al loro posto si consigli di ricorrere ai CSS oppure agli elementi semantici <del>...</del> o <s>...</s>.

<strike>strike</strike> ~~strike~~

`<strong>...</strong>`

Gli elementi <strong> sono impiegati per evidenziare quei testi che si desidera porre particolarmente in risalto stampandoli in grassetto (bold).

<b>bold</b>	bold
<strong>strong</strong>	strong

`<style>...</style>`

Gli elementi <style>...</style> sono dei "contenitori" utilizzabili allo scopo di includere le informazioni di stile all'interno della pagina Web riunendole nell'intestazione (<elemento <head>)

`<sub>...</sub>`

Gli elementi <sub>...</sub> consentono di evidenziare quelle porzioni di testo che debbono essere visualizzate come pedici.

H<sub>2</sub>O

H₂O

`<summary>...</summary>`

<details>

                      <summary style="color:red;">Cliccare sul triangolino per espandere il testo</summary>

                      Il testo "a scomparsa" normalmente nascosto può essere espanso cliccando sul tringolino.

                      </details>

Cliccare sul triangolino per espandere il testo

Il testo "a scomparsa" normalmente nascosto può essere espanso cliccando sul tringolino.

Vedi: <details>...</details>.

`<sub>...</sub>`

Gli elementi <sup>...</sup> consentono di evidenziare quelle porzioni di testo che debbono essere visualizzate come apici.

2<sup>3</sup>=8

2³=8

`<table>...</table>`

Gli elementi <table>...</table> definiscono le tabelle HTML.
Le tabella HTML sono costituita dall'elemento <table> e da uno o più elementi <tr>, <th> e <td>.
Gli elementi <tr> definiscono le righe delle tabelle, gli elementi <th> definiscono le intestazioni (header) delle tabelle mentre gli elementi <td> definiscono le celle che costituiscono le colonne della tabella.
Si possono definire anche delle tabelle più complesse che possono includere gli elementi: <caption>, <col>, <colgroup>, <thead>, <tfoot> e <tbody>.

<table style="width: 100%" border="1">

                      <thead>

                      <tr>

                      <th>merce</th>

                      <th>costo</th>

                      </tr>        

                      </thead>

                      <tbody>

                      <tr>

                      <td>arance 1 kg</td>

                      <td>1,00</td>

                      </tr>

                      <tr>

                      <td>limoni 1 kg</td>

                      <td>1,20</td>

                      </tr>

                      <tr>

                      <td>mele 2 kg</td>

                      <td>2,15</td>

                      </tr>

                      </tbody>

                      <tfoot>

                      <tr>

                      <td>totale</td>

                      <td>4,35</td>

                      </tr>

                      </tfoot>

                      </table>

merce	costo
arance 1 kg	1,00
limoni 1 kg	1,20
mele 2 kg	2,15
totale	4,35

NOTA:
Nell'esempio precedente l'elemento <table> è caratterizzato dalla presenza dell'attributo border.
<table style="width: 100%" border="1">
Nello standard HTML-4 il suddetto attributo abilitava/disabilitava la visualizzazione dei filetti corrispondenti ai bordi delle caselle e della tabella nel suo complesso.

`border="0"`	nasconde i filetti;
`border="1"`	mostra i filetti.

Con l'introduzione dello standard HTML-5 l'attributo border delle tabelle è stato dichiarato deprecated ovvero sconsigliato, per cui non bisognerebbe più usarlo optando per soluzioni alternative basate sul ricorso ai CSS!

Circa `<thead>` e `<tfoot>`.

Ci si potrebbe forse interrogare circa l'utilità degli <thead> e <tfoot> ed in particolare di quest'ultimo.
Tutto si chiarisce quando si apprende che gli elementi <thead> e <tfoot> , abbinati con delle opportune regole CSS, possono essere utilizzati per creare, all'interno delle pagine Web, delle "finestre" per la visualizzazione delle voci delle tabelle di grandi dimensioni in uno spazio limitato.

Header 1	Header 2	Header 3
Colonna-1 - Cell content with content to wrap as required. Lorem ipsum dolor sit amet consectetuer Phasellus a ullamcorper lorem velit. Interdum enim mus Cras eu Phasellus massa et odio sed cursus.	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Colonna-1	Colonna-2	Colonna-3
Footer-1	Footer-2	Footer-3

pagina web: tab_scroll.htm - codice: tab_scroll.txt.

`<tbody>...</tbody>`

Il tag <tbody> raggruppa gli elementi contenuti del corpo in una tabella HTML in un'unica entità.
L'elemento <tbody> viene utilizzato congiuntamente agli elementi <thead> e <tfoot> per organizzare la tabella in entità indipendenti.

<table>

                        <thead>

                          <tr>

                            <th>Studenti</th>

                            <th>Voti</th>

                          </tr>

                        </thead>

                        <tbody>

                          <tr>

                            <td>Mario</td>

                            <td>7</td>

                          </tr>

                          <tr>

                            <td>Anna</td>

                            <td>6</td>

                          </tr>

                        </tbody>

                      </table>

Studenti	Voti
Mario	7
Anna	6

`<td>...</td>`

Il tag <td>, definisce le celle di default di una tabella <tbody> consentendo di distinguerle da quelle dell'intestazione <thead>.

<table>

                        <thead>

                          <tr>

                            <th>Studenti</th>

                            <th>Voti</th>

                          </tr>

                        </thead>

                        <tbody>

                          <tr>

                            <td>Mario</td>

                            <td>7</td>

                          </tr>

                          <tr>

                            <td>Anna</td>

                            <td>6</td>

                          </tr>

                        </tbody>

                      </table>

Studenti	Voti
Mario	7
Anna	6

`<textarea>...</textarea>`

Gli elementi <textarea>...</textarea> definiscono delle aree dedicate all'editing ti testi costituiti da più linee.
Le aree di testo "multilinea" possono contenere un numero illimitato di caratteri.
Il testo viene visualizzato tipicamente utilizzando font a larghezza fissa come il Courier.
Le dimensioni dell'area di testo sono determinate dai valori degli attributi cols e rows, oppure attraverso le proprietà di altezza (height) e larghezza (width) specificate nei CSS.

<textarea rows="10" cols="30" name="textarea" inputmode="text">Questo è un testo di prova</textarea> Questo è un testo di prova

L'attributo globale inputmode fornisce indicazioni circa il tipo di dati che potrebbero essere introdotti dall'utente al fine di permettere l'apertura della tastiera virtuale più adatta.

`<tfoot>...</tfoot>`

Il tag <tfoot> raggruppa gli elementi alla base di una tabella HTML in un'unica entità.
L'elemento <tfoot> viene utilizzato congiuntamente agli elementi <thead> e <tbody> per organizzare la tabella in entità indipendenti.

<table>

                        <thead>

                          <tr>

                            <th>Studenti</th>

                            <th>Voti</th>

                          </tr>

                        </thead>

                        <tbody>

                          <tr>

                            <td>Mario</td>

                            <td>7</td>

                          </tr>

                          <tr>

                            <td>Anna</td>

                            <td>6</td>

                          </tr>

                        </tbody>

                        <tfoot>

                          <tr>

                            <td>stringa</td>

                            <td>numeri</td>

                          </tr>

                        </tfoot>

                      </table>>

Studenti	Voti
Mario	7
Anna	6
stringa	numeri

`<th>...</th>`

Il tag <th>, definisce le celle dell'intestazione di una tabella <thead> consentendo di distinguerle da quelle del corpo <tbody>.

<table>

                        <thead>

                          <tr>

                            <th>Studenti</th>

                            <th>Voti</th>

                          </tr>

                        </thead>

                        <tbody>

                          <tr>

                            <td>Mario</td>

                            <td>7</td>

                          </tr>

                          <tr>

                            <td>Anna</td>

                            <td>6</td>

                          </tr>

                        </tbody>

                      </table>

Studenti	Voti
Mario	7
Anna	6

`<thead>...</thead>`

Il tag <thead> raggruppa gli elementi costituenti l'intestazione di una tabella HTML in un'unica entità.
L'elemento <thead> viene utilizzato congiuntamente agli elementi <tbody> e <tfoot> per organizzare la tabella in entità indipendenti.

<table>

                        <thead>

                          <tr>

                            <th>Studenti</th>

                            <th>Voti</th>

                          </tr>

                        </thead>

                        <tbody>

                          <tr>

                            <td>Mario</td>

                            <td>7</td>

                          </tr>

                          <tr>

                            <td>Anna</td>

                            <td>6</td>

                          </tr>

                        </tbody>

                      </table>

Studenti	Voti
Mario	7
Anna	6

`<time>...</time>`

Il tag <time>, che evidenzia la presenza di una data o di un'altra indicazione temporale, per finalità semantiche.

<time datetime="2018-01-01 00:00">Capodanno</time> Capodanno

`<title>...</title>`

Il tag <title>, definisce il titolo del documento, deve essere obbligatoriamente presente in tutti i documenti HTML.
Il suddetto titolo, ovvero la corrispondente stringa, verrà impiegata in tutti i contesti in cui occorre far riferimento alla pagina Web, in particolare come titolo mostrato nella barra degli strumenti del browser, come identificativo della pagina nella lista dei preferiti e simili, ma anche come titolo della pagina nei risultati restituiti dai motori di ricerca.

`<tr>...</tr>`

Il tag <tr>, definisce le righe (row) di una tabella.
Ogni elemento <tr> può contenere al suo interno degli elemento <td> o <th>.

<table>

                        <thead>

                          <tr>

                            <th>Studenti</th>

                            <th>Voti</th>

                          </tr>

                        </thead>

                        <tbody>

                          <tr>

                            <td>Mario</td>

                            <td>7</td>

                          </tr>

                          <tr>

                            <td>Anna</td>

                            <td>6</td>

                          </tr>

                        </tbody>

                      </table>

Studenti	Voti
Mario	7
Anna	6

`<track>...</track>`

Gli elementi <track>...</track> consentono di selezionare le tracce delle rosorse multimediali.

`<u>...</u>`

Gli elementi <u>...</u> denotavano originariamente quelle porzioni di testo che dovevano essere sottolineate.
Nel contesto di HTML elementi <u>...</u> sono impiegati allo scopo di rappresentare delle porzioni di testo che "dovrebbero essere stilisticamente diverse dal testo normale", come le parole errate o simili.

<u>sottolineato</u>

sottolineato

`<ul>...</ul>`

Gli elementi <ul>...</ul> permettono di includere delle liste NON ordinate (un-ordered) all'interno della pagina Web.
Vedi anche <li>...</li> e <ol>...</ol>.

`<var>...</var>`

Gli elementi <var> vengono impiegati per evidenziare le parti di testo (che nei manuali tecnici) sono intese come variabili. Il tag è stato introdotto per finalità semantiche.

<var>Variabile</var> Variabile

`<video>...</video>`

L'elemento <video> individua una risorsa corrispondente ad una registrazione video rendendola fruibile, rendendo disponibile una interfaccia utente costituita di pulsanti di start, stop, regolazione del volume, eccetera.
L'attributo poster consente di selezionare un immagine fissa da usare come "manifesto" di presentazione del video.

<video poster="Elementi_HTML_files/video.jpg" controls="controls" width="50%;">

                <source src="Elementi_HTML_files/video.mp4" type="video/mp4">

                Your browser does not support HTML5 video.

              </video>

`<wbr>`

I tag <wbr> (Word Break Opportunity) consentono di evidenziare quei punti in cui potrebbe essere, eventualmente, possibile spezzare una stringa di caratteri molto lunga priva di interruzioni naturali (spazi, a capo, eccetera).

Esempio:
in assenza di indicazioni contrarie i browser tenteranno di scrivere ogni singola parola sulla stessa linea.
Introducendo i tag <wbr> si forza il browser ad andare a capo rendendo il testo più leggibile.

Esempio:

Random DNA Sequence results

              random sequence 1 consisting of 1000 DNA bases.

ctgtacaaggtcctacaggattaagatctgaaaacttgagcagctattgcgcgcagcgcgacttgctaccagacagctttcttgatgtgttgggaaatagaaattactagactggatgctggttcaattgaaacctatcattaacttttttccctaggtggcctgacatacctgtcaagacttaagagttggctggctcatttttcctgggcgcagttggcacttcaaatagagagttacggatcattatcatttctaggtggtttatttccgtccaacgttcgctatacatgcagagaccgacttaattataagaactacgcggggcatagcctattgggcgtagtttgatagcttgctaggtgtttttagtaccaagtttccaccttctttgattaaaacaccctgagtggcttgagagcagtccgccaagggatggggtatagaacgataggcaccccggtattgcgtgaaagtatattatcgtggccttactttgtttaccacgtagaagagcatccgcgggcatatgagtaagcagtacccttagttgggtcggagcgaactcaggtcatgaacgaaagcgaaaccctgtgtgattttaaaatacgatttcaatacgctccgctgagtgccttgaaacattccgcgccacaccgcattggcacagaaggtcagcctgagctcggacctacatgtgagtatagcaacttgggccacaaacgcagtaggggcttagcacgacgatgtatgccagtatgaccacttcatgtttgctgaagggtagtaactgtgaggctgctggaatacaagctatgaacttcagagccaggtggcttatgatactgtggtagtgttaactatagattcgctatgcggatcacgggttcattcgtgggcgactttgtagggattgtggcgcgggacctattagatcacttgtgtggttaaatttgttcaccagctgctattcgaggtgttatcagagcgtaagacacgg

Bot
Bot = agenti informatici. Software capaci di sostituire gli uomini eseguendo analisi automatiche di grandi moli di dati.

Default
Valore utilizzato nel caso in cui l'operatore non specifichi nessuna opzione più specifica.

Finalità semantiche
Gli elementi introdotti per finalità semantiche sono elementi introdotti per migliorare la leggibilità del testo da parte dei Bot.

Risorse
Per risorsa si intende un qualsiasi manufatto informatico attivo o passivo (programmi, pagine HTML, file CSS, immagini, eccetera).

Elenco dei principali elementi HTML

Indici

<!DOCTYPE>

<a>...</a>

<abbr>...</abbr>

<acronym>...</acronym>

<address>...</address>

<area>...</area>

<article>...</article>

<aside>...</aside>

<audio>...</audio>

<b>...</b>

<base>...</base>

<bdi>...</bdi>

<bdo>...</bdo>

<big>...</big>

<blockquote>...</blockquote>

<body>...</body>

<br>

<button>...</button>

<canvas>...</canvas>

<caption>...</caption>

<cite>...</cite>

<code>...</code>

<col>...</col>

<colgroup>...</colgroup>

<data>...</data>

<datalist>...</datalist>

<del>...</del>

<details>...</details>

<dfn>...</dfn>

<div>...</div>

<dialog>...</dialog>

<dd>...</dd>

<dl>...</dl>

<dt>...</dt>

<em>...</em>

<embed>

<fieldset>...</fieldset>

<figcaption>...</figcaption>

<figure>...</figure>

<footer>...</footer>

<form>...</form>