Riferimento agli elementi HTML5

HTML5 è un insieme di tecnologie per la creazione di siti web e applicazioni più ricchi e potenti, che supportano contenuti multimediali, interagiscono con le interfacce software, strutturano i documenti e molto altro.

Questa pagina è un riferimento rapido agli elementi introdotti (o formalmente standardizzati) da HTML5. Ogni voce rimanda a un capitolo dedicato con attributi, supporto dei browser ed esempi eseguibili.

Perché HTML5 ha introdotto gli elementi semantici

Prima di HTML5, la struttura delle pagine era costruita quasi interamente con contenitori generici <div> e <span>, distinti solo da nomi di class o id che avevano significato per l'autore ma non per la macchina. HTML5 ha introdotto gli elementi semantici — tag il cui nome descrive il significato del contenuto che racchiudono (<header>, <nav>, <article>, <footer>, …) piuttosto che la sola apparenza. Questo è importante per tre motivi concreti:

Accessibilità. I lettori di schermo e altre tecnologie assistive espongono punti di riferimento come "main", "navigation" e "complementary", così gli utenti possono passare direttamente alla sezione desiderata. Un <nav> viene annunciato come navigazione; un <div class="nav"> no.
SEO e leggibilità automatica. I motori di ricerca e gli altri crawler usano la struttura per capire di cosa parla una pagina e quale parte è il contenuto principale, invece di indovinarlo dai nomi delle classi.
Manutenibilità. Il markup semantico si legge come uno schema della pagina, così il prossimo sviluppatore (o il te futuro) capisce il layout senza decodificare i hook CSS.

Per una guida più completa sulla strutturazione semantica delle pagine, consulta Semantic Elements in HTML5.

Nota: Alcuni elementi elencati di seguito — come <embed> e <wbr> — esistevano nei browser molto prima di HTML5 e sono stati semplicemente standardizzati (formalmente specificati) in esso, anziché essere completamente nuovi.

Nuovi elementi strutturali/semantici

Elementi	Descrizione
`<article>`	Definisce un contenuto indipendente e autonomo.
`<aside>`	Definisce una sezione con informazioni aggiuntive correlate al contenuto circostante l'elemento aside.
`<details>`	Contiene dettagli aggiuntivi che l'utente può aprire e visualizzare.
`<dialog>`	Specifica una finestra di dialogo o una finestra popup.
`<figcaption>`	Aggiunge una didascalia o spiegazione al contenuto del tag `<figure>`.
`<figure>`	Specifica un contenuto autonomo.
`<footer>`	Definisce il piè di pagina di una pagina web o di una sezione.
`<header>`	Definisce l'intestazione di una pagina o di una sezione.
`<main>`	Specifica il contenuto principale di un documento.
`<nav>`	Definisce un blocco di link di navigazione, all'interno del documento corrente o verso altri documenti.
`<section>`	Crea sezioni autonome all'interno di una pagina web contenenti contenuto logicamente collegato.
`<summary>`	Definisce l'intestazione visibile per l'elemento `<details>`.

Elementi tipografici e di internazionalizzazione (i18n)

Questi elementi descrivono il significato a livello di testo, le annotazioni e la gestione di script con direzione mista o delle lingue dell'Asia orientale.

Elementi	Descrizione
`<bdi>`	Isola il testo bidirezionale (quando una lingua con direzionalità da destra a sinistra, come l'arabo o l'ebraico, viene usata in linea con lingue da sinistra a destra).
`<data>`	Collega il contenuto visibile a un `value` leggibile dalla macchina (aggiunto in HTML 5.1).
`<mark>`	Evidenzia una parte del testo che ha rilevanza.
`<rp>`	Definisce un testo alternativo visualizzato nei browser che non supportano il tag `<ruby>`.
`<rt>`	Aggiunge il testo di pronuncia/annotazione mostrato sopra (o accanto) al testo base all'interno di un elemento `<ruby>`.
`<ruby>`	Definisce un'annotazione ruby (furigana) — guide fonetiche usate con il giapponese e altre lingue dell'Asia orientale.
`<time>`	Definisce un orario leggibile dall'uomo su un orologio a 24 ore o una data precisa nel calendario gregoriano.
`<wbr>`	Indica una posizione in cui il browser può aggiungere un'interruzione di riga se necessario (un'opportunità di "word break").

Nuovi elementi per i moduli

Elementi	Descrizione
`<datalist>`	Crea un elenco di opzioni di input predefinite dal tag `<input>`.
`<output>`	Definisce uno spazio per rappresentare il risultato di un calcolo eseguito da uno script o dall'interazione dell'utente con un elemento del modulo (tag `<form>`).

Nuovi elementi multimediali e grafici

Elementi	Descrizione
`<audio>`	Incorpora contenuto audio in un documento HTML.
`<canvas>`	Definisce un'area nella pagina web dove è possibile disegnare oggetti, immagini, animazioni e composizioni fotografiche tramite script.
`<embed>`	Funge da contenitore per applicazioni esterne e contenuti interattivi (standardizzato in HTML5).
`<picture>`	Fornisce più sorgenti di immagini affinché il browser possa scegliere quella migliore per il viewport o il formato.
`<source>`	Definisce più risorse multimediali in formati diversi per `<audio>`, `<video>` o `<picture>`.
`<svg>`	Disegna grafica vettoriale scalabile (vedi SVG in HTML5).
`<track>`	Specifica tracce di testo (didascalie, sottotitoli) per gli elementi multimediali.
`<video>`	Incorpora video in un documento HTML.

Altri nuovi elementi

Elementi	Descrizione
`<meter>`	Definisce una misurazione scalare all'interno di un intervallo noto (ad esempio, l'utilizzo del disco).
`<progress>`	Visualizza l'avanzamento del completamento di un'attività (una barra di avanzamento).
`<template>`	Contiene HTML inerte che non viene visualizzato al caricamento, ma può essere clonato e inserito tramite script.

Rimossi / Obsoleti in HTML5

Questi elementi facevano parte della specifica ma sono stati successivamente rimossi. I browser non li supportano più in modo affidabile e non dovresti usarli nel nuovo codice.

Elementi	Descrizione
`<keygen>`	Generava una coppia di chiavi pubblica/privata all'invio del modulo. Rimosso dallo standard — usa invece la Web Crypto API.
`<menuitem>`	Definiva un comando in un menu contestuale. Rimosso dallo standard; mai ampiamente supportato.

Un rapido esempio semantico

Il frammento di seguito mostra come gli elementi strutturali si combinano per descrivere un tipico layout di pagina — nota che si legge come uno schema anche senza alcun CSS:

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Why semantic HTML matters</h2>
      <p>Semantic tags describe meaning, not just appearance.</p>
      <figure>
        <img src="diagram.png" alt="Page structure diagram" />
        <figcaption>A semantic page outline.</figcaption>
      </figure>
    </article>

    <aside>
      <h2>Related</h2>
      <p>Links to other posts.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 My Blog</p>
  </footer>
</body>