Seguimi sui social
Profilo LinkedIn Profilo Facebook Profilo Twitter Profilo Google+
Home > Archivio > HTML5: tag e descrizioni per costruire pagine secondo il W3C

Tag HTML5

HTML5: tag e loro descrizione

Autore: Andrea Pacchiarotti
Website: www.andreapacchiarotti.it
Ultimo aggiornamento: 30 Aprile 2017
Categoria: Siti web HTML5

HTML5: tag e descrizioni

HTML5, tag e descrizioni per costruire le pagine web secondo gli standard del W3C, elenca tutti i tag HTML, ma non quelli obsoleti e deprecati.

<!--...--> Commento
<p>Questo è un paragrafo</p>
<!-- I commenti non sono mostrati dai browser -->
Nel browser compare solo: Questo è un paragrafo

<!DOCTYPE> Dichiara il tipo di documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>

<a> Collegamento ipertestuale
<a href="https://www.andreapacchiarotti.it">Andrea Pacchiarotti</a>

<abbr> Abbreviazione o acronimo
La <abbr title="World Health Organization">WHO</abbr> è stata fondata nel 1948.

<address> Informazione di contatto
<address>
Scritto da <a href="mailto:pacchiarotti@gmail.com">Andrea Pacchiarotti</a><br> 
Vienimi a trovare su:<br>
www.andreapacchiarotti.it <br>
Roma <br>
Italia
</address>

<area> Aree cliccabili nella mappa immagine
<img src="pianeti.png" width="150" height="100" alt="Pianeti" usemap="#pianeti">
<map name="pianeti">
<area shape="rect" coords="0,0,82,126" href="sole.html" alt="Sole">
<area shape="circle" coords="90,58,3" href="mercurio.html" alt="Mercurio">
<area shape="circle" coords="124,58,8" href="venere.html" alt="Venere">
</map>

<article> Testo di un articolo
<article>
<h1>Google Chrome</h1>
<p>Google Chrome è nato nel 2008</p>
</article>

<aside> Testo all'interno della spalla
<p>Andrò in Kenya la prossima estate</p>
<aside>
<h4>Kenya</h4>
<p>Il safari è bellissimo</p>
</aside>

<audio> Contenuto audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Il tuo browser non supporta il tag audio
</audio>

<b> Grassetto
<p>Questo non è in grassetto <b>questo è in grassetto</b></p>

<base> Specifica la base URL per tutti gli URL relativi in un documento
<head>
<base href="https://www.andreapacchiarotti.it/immagini/" target="_blank">
</head>
<body>
<img src="volto.gif" width="25" height="40" alt="Volto di Andrea">
</body>

<bdi> Isola testo che potrebbe essere formattato con altra direzione rispetto al resto del testo
<p dir="ltr">Questa parola arabica <bdi>PAROLA_ARABICA</bdi> è automaticamente mostrata da destra verso sinistra>
Risultato:
Questa parola arabica ACIBARA_ALORAP è automaticamente mostrata da destra a sinistra

<bdo> Annulla la direzione corrente del testo
<bdo dir="rtl">
Questo testo andrà da destra verso sinistra
</bdo>
Risultato:
artsinis osrev artsed ad àrdna otset otseuQ

<blockquote> Quota un testo preso da un'altra fonte e lo rientra verso destra
<blockquote cite="https://www.andreapacchiarotti.it">
Binary digit - BIT: dal nulla il tutto
</blockquote>

<body> Rappresenta il corpo del documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>

<br> Interruzione di riga
<p>Testo in linea<br>che qui va a capo</p>

<button> Bottone cliccabile
<button type="button" onclick="alert('Ciao mondo!')">Cliccami!</button>

<canvas> Usato per disegnare grafiche al volo via scripting (normalmente con JavaScript)
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

<caption> Didascalia della tabella
<table>
<caption>Guadagno annuale</caption>
<tr><th>Mese</th><th>Euro</th></tr>
<tr><td>Gennaio</td><td>2.500</td></tr>
</table>

<cite> Titolo di un lavoro
<p><cite>L'urlo</cite> di Edward Munch. 1893</p>

<code> Racchiude un pezzo di codice. Viene formattato in Courier New
<code>Pezzo di codice</code><br>

<col> Specifica le proprietà di colonna all'interno di <colgroup>. In quest'esempio le prime 2 colonne sono rosse e la terza è gialla
<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr><th>ISBN</th><th>Titolo</th><th>Prezzo</th></tr>
<tr><td>3476896</td><td>HTML</td><td>Euro 50</td></tr>
</table>

<colgroup> Raggruppa le colonne delle tabelle. Vedi <col>

<datalist> Raggruppa opzioni
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

<dd> Valore di un termine nelle descrizioni
<dl>
<dt>Bevande</dt>
<dd>Tè</dd>
<dd>Caffè</dd>
</dl>

<del> Testo barrato
<p>Il mio colore preferito è <del>blu</del></p>

<details> Raggruppa dettagli aggiuntivi che l'utente può vedere o nascondere tramite freccia
<details>
<summary>Copyright 1999-2014</summary>
<p>Andrea Pacchiarotti. Tutti i diritti riservati</p>
<p>Contenuti e fotografie di questo sito sono di proprietà di Andrea Pacchiarotti</p>
</details>

<dfn> Definisce un termine. Appare in corsivo
<p><dfn>HTML5</dfn> è lo standard attuale</p>

<dialog> Finestra di dialogo
<dialog open>Creo un riquadro</dialog>

<div> Contenitore
<div style="color:#FF0000">
<h3>Sono un'intestazione</h3>
<p>Sono un paragrafo</p>
</div>

<dl> Lista di descrizione
<dl>
<dt>Bevande</dt>
<dd>Tè</dd>
<dd>Caffè</dd>
</dl>

<dt> Un termine della descrizione
<dl>
<dt>Bevande</dt>
<dd>Tè</dd>
<dd>Caffè</dd>
</dl>

<em> Enfatizza un termine. Appare in corsivo
<em>Sono un testo enfatizzato</em>

<embed> Contenitore per un'applicazione esterna non HTML. Qui l'esempio incorpora un'animazione in Flash
<embed src="helloworld.swf">

<fieldset> Raggruppa elementi in un modulo
<form>
<fieldset>
<legend>Anagrafica</legend>
Nome: <input type="text"><br>
Email: <input type="text"><br>
Date di nascita: <input type="text">
</fieldset>
</form>

<figcaption> Didascalia di un'immagine
<figure>
<img src="img_pulpit.jpg" alt="Squalo" width="300" height="150">
<figcaption>Fig1. - Lo squalo in natura</figcaption>
</figure>

<figure> Contenitore per un'immagine
<figure>
<img src="img_pulpit.jpg" alt="Squalo" width="300" height="150">
<figcaption>Fig1. - Lo squalo in natura</figcaption>
</figure>

<footer> Piè di pagina di un articolo
<footer>
<p>Post di: Andrea Pacchiarotti</p>
<p>Contatto: <a href="mailto:pacchiarotti@gmail.com">
pacchiarotti@gmail.com</a></p>
</footer>

<form> Modulo
<form>
<fieldset>
<legend>Anagrafica</legend>
Nome: <input type="text"><br>
Email: <input type="text"><br>
Date di nascita: <input type="text">
</fieldset>
</form>



<h1>...<h6> Intestazioni
<h1>Sono un'intestazione 1</h1>
<h2>Sono un'intestazione 2</h2>
<h3>Sono un'intestazione 3</h3>
<h4>Sono un'intestazione 4</h4>
<h5>Sono un'intestazione 5</h5>
<h6>Sono un'intestazione 6</h6>

<head> Contenitore del titolo di un documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>

<header> Intestazione di un articolo
<article>
<header>
<h1>Sono un'intestazione</h1>
</header>
<p>Sono un paragrafo</p>
</article>

<hr> Linea orizzontale per separare contenuti
<hr>

<html> Contenitore dei tag del documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>

<i> Corsivo
<p>La mia macchina si chiama <i>Gastone</i></p>

<iframe> Crea una cornice con all'interno la pagina richiamata
<iframe src="https://www.andreapacchiarotti.it"></iframe>

<img> Carica un'immagine
<figure>
<img src="img_pulpit.jpg" alt="Squalo" width="300" height="150">
<figcaption>Fig1. - Lo squalo in natura</figcaption>
</figure>

<input> Controllo per immissione dati
<form>
<fieldset>
<legend>Anagrafica</legend>
Nome: <input type="text"><br>
Email: <input type="text"><br>
Date di nascita: <input type="text">
</fieldset>
</form>

<ins> Segnala testo inserito successivamente alla cancellazione tramite <del> (che fa apparire il testo barrato). Appare sottolineato
<p>Il mio colore preferito è <del>blu</del> <ins>rosso</ins>!</p>

<kbd> Inserimento da tastiera
<p>Salva il documento premendo <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

<keygen> Genera chiavi doppie. Quando il form è inviato la chiave privata viene salvata nel "repository" locale e quella pubblica inviata al server
<form action="/action_page.php" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>

<label> Etichetta per <input>
<label for="maschio">Maschio</label><input type="radio" name="genere" id="maschio" value="maschio">

<legend> Didascalia per <fieldset>
<form>
<fieldset>
<legend>Anagrafica</legend>
Nome: <input type="text"><br>
Email: <input type="text"><br>
Date di nascita: <input type="text">
</fieldset>
</form>

<li> Voce di un elenco
<ol>
<li>Caffè</li>
<li>Tè</li>
</ol>

<link> Richiama risorse esterne
<head>
<link rel="stylesheet" type="text/css" href="formatta.css">
</head>

<main> Specifica il contenuto principale di un documento
<main>
<h1>Web Browsers</h1>
<p>Google Chrome e Firefox</p>
<article>
<h1>Google Chrome</h1>
<p>...</p>
</article>
<article>
<h1>Mozilla Firefox</h1>
<p>...</p>
</article>
</main>

<map> Mappa immagine
<img src="pianeti.png" width="150" height="100" alt="Pianeti" usemap="#pianeti">
<map name="pianeti">
<area shape="rect" coords="0,0,82,126" href="sole.html" alt="Sole">
<area shape="circle" coords="90,58,3" href="mercurio.html" alt="Mercurio">
<area shape="circle" coords="124,58,8" href="venere.html" alt="Venere">
</map>

<mark> Marca un testo. Appare evidenziato in giallo
<p>Compra la <mark>birra</mark></p>

<menu> Lista di comandi
<div style="background:yellow;border:1px solid #cccccc;padding: 10px;" contextmenu="mymenu">
<p>Funziono solo con Firefox. Fare tasto destro per vedere il menù contestuale</p>
<menu type="context" id="mymenu">
<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
<menu label="Condividi su...">
<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>
</menu>
</div>

<menuitem> Voce di una lista di comandi. Vedi <menu>

<meta> Metadati
<head>
<meta charset="UTF-8">
<meta name="description" content="...">
<meta name="keywords" content="...">
<meta name="author" content="...">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<meter> Scala di misura all'interno di un intervallo
<meter value="2" min="0" max="10">2 di 10</meter><br>
<meter value="0.6">60%</meter>

<nav> Barra di navigazione per i link
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

<noscript> Contenuto alternativo per gli utenti che non supportano scripts lato client
<script>
document.write("Ciao mondo!")
</script>
<noscript>Il tuo browser non supporta JavaScript</noscript>

<object> Inserisce un oggetto. Qui incorpora un filmato in Flash
<object width="400" height="400" data="helloworld.swf"></object>

<ol> Lista ordinata
<ol>
<li>Caffè</li>
<li>Tè</li>
</ol>

<optgroup> Raggruppa opzioni in un elenco a discesa. Appare in grassetto
<select>
<optgroup label="Auto svedesi">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Auto tedesche">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

<option> Opzione in un elenco a discesa. Vedi <optgroup>

<output> Risultato di un calcolo
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>



<p> Paragrafo
<p>Sono un paragrafo di testo</p>

<param> Parametro di un oggetto. Qui impostandolo su true fa partire il file aguilera al caricamento della pagina
<object data="aguilera.wav">
<param name="autoplay" value="true">
</object>

<picture> Contenitore per più immagini
<picture>
<source media="(min-width: 650px)" srcset="pistillo.jpg">
<source media="(min-width: 465px)" srcset="gambo.jpg">
<img src="fiori.jpg" alt="Fiori" style="width:auto;">
</picture>

<pre> Preserva le distanze del testo
<pre>
sono un testo
mostrato con le distanze
che vedi
</pre>

<progress> Barra di progresso di un compito
<progress value="22" max="100"></progress>

<q> Citazione breve. Raggruppa il testo tra “ ”
<p>Lo scopo del WWF è: 
<q>Costruire un futuro dove le persone vivono in armonia con la natura</q>
</p>

<rp> Definisce quello da mostrare nei browser che non supportano le annotazioni Ruby (linguaggio di scripting)
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

<rt> Annotazioni Ruby. Vedi <rp>

<ruby> Annotazioni Ruby. Vedi <rp>

<s> Testo barrato
<p><s>La mia macchina è blu</s></p>
<p>La mia nuova macchina è grigia</p>

<samp> Marca un codice d'esempio da computer
<samp>Codice...</samp>

<script> Script lato client. Qui scrive Ciao JavaScript! con il linguaggio omonimo
<script>
document.getElementById("demo").innerHTML = "Ciao JavaScript!";
</script>

<section> Sezione di un documento
<section>
<h1>WWF</h1>
<p>Il World Wide Fund for Nature (WWF) è....</p>
</section>

<select> Elenco a discesa con opzioni
<select>
<optgroup label="Auto svedesi">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Auto tedesche">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

<small> Testo piccolo
<p>www.andreapacchiarotti.it</p>
<p><small>Copyright 2000-2050</small></p>

<source> Elementi multimediali, audio e video. Qui il browser dovrebbe scegliere quale tipo di file supporta
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Il tuo browser non supporta il tag audio
</audio>

<span> Formatta parte di un testo
<p>La mia cantante preferita ha gli occhi <span style="color:blue">blu</span></p>

<strong> Grassetto
<strong>Sono un testo in grassetto</strong>

<style> Foglio di stile
<head>
<style>
h1 {color:red}
p {color:blue}
</style>
</head>

<sub> Pedice
<p>Bevo poca H<sub>2</sub>O</p>

<summary> Intestazione per <details>
<details>
<summary>Copyright 1999-2014</summary>
<p>Andrea Pacchiarotti. Tutti i diritti riservati</p>
<p>Contenuti e fotografie di questo sito sono di proprietà di Andrea Pacchiarotti</p>
</details>

<sup> Apice
<p>Gent.<sup>ma</sup></p>

<table> Tabella
<table>
<caption>Guadagno annuale</caption>
<tr><th>Mese</th><th>Euro</th></tr>
<tr><td>Gennaio</td><td>2.500</td></tr>
</table>

<tbody> Raggruppa il corpo di una tabella
<table>
<thead>
<tr><th>Mese</th><th>Stipendio in Euro</th></tr>
</thead>
<tbody>
<tr><td>Gennaio</td><td>2.500</td></tr>
<tr><td>Febbraio</td><td>2.400</td></tr>
</tbody>
<tfoot>
<tr><td>Sum</td><td>4.900</td></tr>
</tfoot>
</table>

<td> Cella di tabella. Vedi <tbody>

<textarea> Controllo multilinea in un modulo
<textarea rows="4" cols="50">
Sono un testo che andrà in una textarea 
</textarea>

<tfoot> Raggruppa il piè di tabella
<table>
<thead>
<tr><th>Mese</th><th>Stipendio in Euro</th></tr>
</thead>
<tbody>
<tr><td>Gennaio</td><td>2.500</td></tr>
<tr><td>Febbraio</td><td>2.400</td></tr>
</tbody>
<tfoot>
<tr><td>Sum</td><td>4.900</td></tr>
</tfoot>
</table>

<th> Intestazione di tabella. Vedi <tfoot>

<thead> Raggruppa le intestazioni di tabella
<table>
<thead>
<tr><th>Mese</th><th>Stipendio in Euro</th></tr>
</thead>
<tbody>
<tr><td>Gennaio</td><td>2.500</td></tr>
<tr><td>Febbraio</td><td>2.400</td></tr>
</tbody>
<tfoot>
<tr><td>Sum</td><td>4.900</td></tr>
</tfoot>
</table>

<time> Data/orario
<p>Apriamo alle <time>10:00</time></p>
<p>Ci incontriamo il giorno di San Valentino alle <time datetime="2008-02-14 20:00">20</time></p>

<title> Titolo di un documento
<!DOCTYPE html>
<html>
<head> <title></title> </head>
<body> </body>
</html>

<tr> Riga di tabella. Vedi <thead>

<track> Specifica dei testi per i media <video> e <audio>. Qui il video in questione possiede sottotitoli
<video src="discorso.vid">
<track kind=subtitles src=discorsoen.vtt srclang=en label="English">
<track kind=subtitles src=discorsoit.vtt srclang=it lang=it label="Italiano">
</video>

<u> Sottolineato
<p><u>Sono un testo sottolineato</u></p>

<ul> Lista puntata
<ul>
<li>Caffè</li>
<li>Tè</li>
</ul>

<var> Rappresenta a variabile formattata in corsivo
<var>Variabile</var>

<video> Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Il tuo browser non supporta il tag video
</video>

<wbr> Interruzione di testo opzionale. A differenza di br, che inserisce un'interruzione di riga in ogni caso, wbr spezza il testo su due linee solo se necessario, in base al layout della pagina e dalla larghezza del tag contenitore.
<p>HTML5 include<wbr />
elementi di markup, di cui una<wbr />
buona parte proviene dalle versioni<wbr />
precedenti </p>

Potrebbe interessarti anche l'articolo su come creare un sito web professionale

Scarica questo articolo in PDF.

Se HTML5 tag e loro descrizione è stato utile, seguimi sui Social networks cliccando i pulsanti in alto a destra di questa pagina.

Per restare aggiornato sulla pubblicazione di nuovi articoli su Microsoft Office, Adobe e web in generale iscriviti gratuitamente alla newsletter


Se invece vuoi condividere questo articolo nella tua Rete sociale, puoi utilizzare i bottoni qui sotto: