Quanti tag HTML usi davvero? La maggior parte degli sviluppatori ha un arsenale di circa una dozzina di elementi: div, p, a, img, span, intestazioni e liste. I restanti 100 e più tag della specifica restano inutilizzati, semplicemente perché la gente se ne è dimenticata o non li ha mai conosciuti.

È un errore. I browser hanno imparato a comprendere la semantica più a fondo di quanto si possa pensare. Gli screen reader ci fanno affidamento. I motori di ricerca analizzano la struttura. Il tag giusto al posto giusto offre accessibilità, SEO e codice leggibile senza una sola riga di JS.

Abbiamo selezionato 18 tag HTML che vale la pena aggiungere al proprio markup quotidiano. Non sono nuovi nel senso di "appena usciti dalla bozza", ma sono nuovi per molti sviluppatori perché sono stati ingiustamente trascurati. Alcuni provengono da HTML5, altri sono sempre stati presenti nella specifica. Ognuno include un esempio funzionante e una spiegazione di dove sia effettivamente utile.

💡 Panoramica rapida:

• Quali tag risolvono problemi di accessibilità e semantica senza JavaScript
• Dove sub/sup, dfn, var e time tornano utili per il markup del testo
• Come <q>, <blockquote> e <cite> formattano correttamente le citazioni
• Perché <video>, <picture> e <figure> organizzano i contenuti multimediali
• Cosa portano alle interfacce del/ins, meter, dialog e menu

1. Markup semantico del testo: sub, sup, dfn, var, time, kbd

Cinque tag che trasformano un testo semplice in una struttura comprensibile sia alle macchine che alle persone. Niente JS, solo HTML nativo.

<sub>** e **<sup>: pedice e apice. Formule chimiche, esponenti matematici, note a piè di pagina. I CSS possono abbassare o alzare visivamente il testo con vertical-align, ma non ne comunicheranno la semantica. E questo è importante: uno screen reader annuncerà "H due O" anziché leggere "H due O" come testo normale. Non usarli per scopi puramente decorativi; per quello esistono gli stili.

1
H<sub>2</sub>O
2
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

<dfn>: un termine in fase di definizione. Quando introduci un nuovo concetto e ne fornisci la definizione, racchiudi il termine in questo tag. Il browser non fa nulla di visivo, ma i motori di ricerca e le estensioni per dizionari usano <dfn> per costruire un glossario della pagina. L'attributo id ti permette di creare riferimenti incrociati quando menzioni di nuovo il termine.

1
<p>
2
  <dfn id="semantic">Семантическая разметка</dfn> — HTML, который
3
  передаёт смысл содержимого, а не только его внешний вид.
4
</p>

<var>: una variabile. Nella documentazione tecnica, nei tutorial, nelle descrizioni di formule. I browser la rendono in corsivo per impostazione predefinita. Per espressioni matematiche complete MathML è meglio, ma <var> è comodo quando la variabile fa parte di una frase.

1
По теореме Пифагора, квадраты сторон
2
<var>a</var> и <var>b</var> дают квадрат гипотенузы <var>c</var>.

<time>: una data o un orario. Le macchine faticano a interpretare "2 aprile" nel mezzo di un paragrafo. Il tag <time> isola la data e fornisce un formato leggibile dalle macchine tramite l'attributo datetime. Calendari, motori di ricerca, parser di eventi: tutti ti ringrazieranno.

1
GenerateJS пройдёт
2
<time datetime="2026-04-02">2 апреля 2026</time>.

<kbd>: input da tastiera. Istruzioni, scorciatoie da tastiera, comandi. Visualizzato con un font a spaziatura fissa, separa semanticamente i nomi dei tasti dal testo circostante. Puoi annidarli per le combinazioni.

1
Закройте окно клавишей <kbd>Esc</kbd>.
2
Сохраните проект: <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd>.

2. Citazioni e riferimenti alle fonti: q, blockquote, cite

Tre tag che coprono tutti gli scenari di citazione, da una frase in linea a un estratto esteso di un libro.

<q>: una citazione in linea all'interno di un paragrafo. Il browser racchiude automaticamente il contenuto tra virgolette corrispondenti alla lingua della pagina. L'attributo opzionale cite specifica l'URL di origine. L'utente non lo vede, ma le macchine sì.

1
Как сказал Джереми Кит,
2
<q cite="https://adactio.com">HTML — объединяющий язык
3
Всемирной паутины</q>.

<blockquote>: una citazione a blocco. Per estratti più estesi: un paragrafo da un articolo, una recensione, un passaggio da una specifica. Supporta anch'esso cite. Il browser aggiunge un rientro di default e puoi stilizzarlo come preferisci.

1
<blockquote cite="https://html.spec.whatwg.org/multipage/">
2
  <p>HTML — это язык разметки, используемый для создания
3
  структурированных документов для Всемирной паутины.</p>
4
</blockquote>

<cite>: il titolo dell'opera citata. Solo il titolo: un libro, articolo, film, gioco. Non il nome dell'autore, non la data, solo il titolo. I browser lo mostrano in corsivo di default. Spesso confuso con l'attributo cite su <q>/<blockquote>, ma sono cose diverse: l'attributo memorizza un URL, mentre il tag <cite> mostra il titolo all'utente.

1
<p>Почитать подробнее можно в
2
<cite>HTML Living Standard</cite>.</p>

3. Struttura del documento: address e dl/dt/dd

<address>: informazioni di contatto. Non l'indirizzo postale di un'azienda (quello lo gestiscono i microdati Schema), ma i recapiti dell'autore della pagina o dell'articolo. Se inserito dentro <article>, si riferisce all'autore dell'articolo; se in <body>, al proprietario del sito. I motori di ricerca usano questo blocco per costruire il Knowledge Graph.

1
<address>
2
  <a href="mailto:[email protected]">[email protected]</a>
3
</address>

<dl>**, <dt>, **<dd>: una lista di descrizioni. Non solo un "glossario di termini", ma qualsiasi struttura "chiave/valore": specifiche di prodotto, metadati, FAQ. Un termine (<dt>) può avere descrizioni multiple (<dd>), e viceversa. L'ordine conta: prima viene il termine, poi la sua descrizione.

1
<dl>
2
  <dt>Элемент</dt>
3
  <dd>Конструкция из открывающего тега, содержимого и закрывающего тега.</dd>
4
  <dt>Атрибут</dt>
5
  <dd>Пара внутри открывающего тега, задающая свойства элемента.</dd>
6
</dl>

4. Contenuti media: video, picture e figure/figcaption

Tre strumenti potenti per lavorare con contenuti visivi e multimediali. Ognuno copre la propria gamma di compiti.

<video>: video incorporato senza player di terze parti. Puoi specificare un singolo src o più elementi <source>; il browser sceglie il primo formato supportato. Un dettaglio utile: l'attributo autopictureinpicture riduce automaticamente il video a una finestra flottante quando si cambia scheda, mentre disablepictureinpicture lo impedisce. Analogamente, disableremoteplayback controlla la trasmissione a Chromecast e Apple TV.

1
<video controls autopictureinpicture>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.mp4" type="video/mp4">
4
</video>

<picture>: immagini responsive con controllo totale. A differenza di srcset su <img>, dove il browser sceglie la sorgente, <picture> ti permette di specificare media query rigorose. Formati diversi (WebP per Chromium, JPEG per gli altri), ritagli diversi per mobile, una versione scura per la dark mode, tutto senza una sola riga di JS.

1
<picture>
2
  <source srcset="hero-dark.webp" media="(prefers-color-scheme: dark)">
3
  <source srcset="hero.webp" type="image/webp">
4
  <img src="hero.jpg" alt="Главный баннер с заголовком статьи">
5
</picture>

<figure>** e **<figcaption>: contenuto autonomo con una didascalia. Un'illustrazione, un diagramma, un listato di codice, una tabella, qualsiasi cosa che possa essere rimossa dal flusso principale senza perdere significato. <figcaption> collega semanticamente la didascalia al contenuto: uno screen reader li legge insieme anziché come elementi separati. Se il contenuto è solo marginalmente correlato al testo (per esempio, una citazione in una barra laterale), usa <aside>.

1
<figure>
2
  <img src="framework-usage.png" alt="Рост React-проектов с 2022 по 2026">
3
  <figcaption>Динамика использования JavaScript-фреймворков, 2022–2026</figcaption>
4
</figure>

5. Mappe di navigazione: map e area

Vecchi ma non obsoleti. Le mappe immagine rendono cliccabili singole regioni di un'immagine. Dove il testo non basta (una mappa interattiva della metropolitana, una planimetria di un edificio, un diagramma anatomico), <map> con <area> funziona senza JS.

1
<map name="london">
2
  <area shape="circle" coords="200,75,50" href="westminster.html" alt="Вестминстер">
3
  <area shape="rect" coords="300,120,380,180" href="city.html" alt="Сити">
4
</map>
5
<img usemap="#london" src="london-map.jpg" alt="Карта центра Лондона">

L'attributo shape accetta circle, rect, poly e default. Le coordinate sono in pixel dall'angolo in alto a sinistra. Per contorni complessi, usa poly con un elenco di punti. Nonostante l'età (il tag ha ben più di vent'anni), gode di un supporto stabile su tutti i browser.

6. Modifica del testo: del e ins

Quando mostri modifiche, revisioni di documenti, aggiornamenti di articoli o differenze legislative, <del> e <ins> forniscono una rappresentazione semanticamente corretta. <del> contrassegna il contenuto rimosso (i browser lo barrano), <ins> contrassegna il contenuto aggiunto (i browser lo sottolineano).

Entrambi supportano cite (perché è stato modificato) e datetime (quando). I motori di ricerca vedono la cronologia delle revisioni della pagina anziché solo testo sovrascritto.

1
<p>
2
  Несмотря на негатив в прессе,
3
  <del datetime="2026-01-15">covfefe</del>
4
  <ins cite="#editorial-note">coverage</ins>.
5
</p>

Non usare <del> e <ins> per barrature puramente decorative; text-decoration: line-through esiste per quello. Questi tag riguardano specificamente il versionamento dei contenuti.

7. Campi di input di nuova generazione

L'elemento <input> si è evoluto ben oltre le semplici stringhe di testo. I browser moderni supportano decine di tipi, ciascuno con validazione integrata, una tastiera specifica per mobile e widget nativi, senza una sola riga di JavaScript.

Tipi chiave che molti progetti ancora ignorano:

• type="color": un selettore colore. Un picker nativo senza dover integrare una libreria per la ruota cromatica.
• type="range": uno slider tra min e max. Volume, prezzo, valutazione, tutto senza dover programmare uno slider.
• type="date": un calendario localizzato. Il browser mostra un selettore data con la formattazione adattata alla regione dell'utente.
• type="datetime-local": data e ora senza fuso orario. Per prenotazioni, scadenze, scheduler.

L'attributo pattern accetta una espressione regolare: il valore non supererà la validazione finché non corrisponde al pattern.

1
<input type="color" value="#FF0657">
2
<input type="range" min="0" max="100" value="75">
3
<input type="date" value="2026-06-13">
4
<input name="username" pattern="[a-z]{5,10}"
5
       title="От 5 до 10 строчных латинских букв">

8. Indicatori numerici

Non confonderlo con <progress>: <meter> serve per un valore statico all'interno di un intervallo noto (occupazione disco, punteggio, valutazione), mentre <progress> è per l'avanzamento di un'attività (download, processo a step).

Il browser colora automaticamente <meter> in base alla posizione del valore rispetto a low, high e optimum. Zona verde: valore vicino all'ottimale; giallo: tollerabile; rosso: fuori dall'intervallo normale. La logica dei colori è personalizzabile via CSS, ma la semantica di base funziona out of the box.

1
<meter value="6.4" min="0" max="10" low="4" high="9" optimum="7.5">
2
  6.4 из 10
3
</meter>

9. Elementi interattivi: dialog e menu

Due tag per interazioni che prima richiedevano librerie JS o sviluppo da zero.

<dialog>: una finestra modale nativa. L'elemento è nascosto di default. Aggiungi l'attributo open e il browser lo mostra sopra la pagina nel top layer. Il metodo JavaScript showModal() fornisce anche lo pseudo-elemento ::backdrop per scurire lo sfondo. Popup, conferma azione, alert, tutto senza una sola riga di posizionamento CSS.

Supporto: Chrome, Edge, Firefox, Safari (dal 2022). Per browser più vecchi, il dialog viene semplicemente renderizzato come un normale contenitore block; sono disponibili polyfill.

1
<dialog id="confirm">
2
  <p>Удалить этот элемент?</p>
3
  <button onclick="this.closest('dialog').close()">Отмена</button>
4
  <button onclick="this.closest('dialog').close('confirmed')">Удалить</button>
5
</dialog>

<menu>: una lista di azioni interattive. Non per la navigazione (usa <nav> per quello), ma specificamente una toolbar: pennelli in un editor grafico, pulsanti di formattazione, azioni su oggetti. L'equivalente semantico di <ul>, ma per pulsanti e comandi. Non ha stili predefiniti, solo significato.

L'attributo type="toolbar" (l'unico rimasto nella specifica) imposta esplicitamente il ruolo toolbar. Il tipo context è stato rimosso dallo standard, quindi oggi <menu> è esclusivamente per insiemi visibili di azioni sullo schermo.

1
<menu type="toolbar">
2
  <li><button>Круглая</button></li>
3
  <li><button>Плоская</button></li>
4
  <li><button>Веерная</button></li>
5
</menu>

Se il markup HTML è una novità per te, ecco un'ottima introduzione di Traversy; Traversy Media è uno dei migliori canali frontend su YouTube:

⁉️🤔 Domande frequenti

Perché usare i tag semantici quando puoi costruire tutto con <div> e <span>?

Gli screen reader si basano sui tag per costruire la struttura della pagina per gli utenti non vedenti; div è invisibile per loro. I motori di ricerca estraggono la semantica per i rich snippet: le valutazioni da <meter>, le FAQ da <dl>, i contatti da <address>. Inoltre il codice si auto-documenta: <article> dice immediatamente «questo è un articolo», mentre <div class="article"> no.

Quali tag della lista sono già utilizzabili in produzione senza problemi?

Tutti e diciotto. <dialog> ha ottenuto il supporto cross-browser con Safari 15.4 (2022), <menu> funziona de facto come wrapper semantico ovunque. <picture> e <video> con <source> sono maturi dal 2016. <meter>, <time>, <kbd>, <dfn> provengono dall'eredità storica di HTML con supporto universale. L'unica avvertenza: <input type="date"> e type="color" possono essere visualizzati in modo diverso a seconda del sistema operativo, ma questo non ne compromette la funzionalità.

I tag <b> e <i> sono morti?

No, ma il loro ruolo è cambiato. <b> ora serve per attirare l'attenzione senza trasmettere importanza (parole chiave in un curriculum), <i> è per espressioni idiomatiche, termini in un'altra lingua, nomi di navi. Per enfatizzare l'importanza, usa <strong>; per l'enfasi tonale, <em>. Il grassetto e il corsivo stilistici sono solo CSS.

Posso usare <meter> per una barra di avanzamento del caricamento?

No. <meter> è per un valore statico all'interno di un intervallo noto (utilizzo del disco, punteggio, valutazione). Per l'avanzamento nel tempo, usa esclusivamente <progress>. I browser animano <progress> quando il value cambia, mentre <meter> rimane statico. Vengono costantemente confusi, ma la semantica è diversa e gli screen reader li annunciano in modo differente.

Cosa devo fare se un browser non supporta <dialog>?

L'elemento viene semplicemente renderizzato come un contenitore a blocco e non si romperà. Aggiungi un polyfill: dialog-polyfill del team Google Chrome (400 righe, nessuna dipendenza) copre showModal(), close() e ::backdrop per i browser più vecchi.

Quale tag adottare per primo?

{iframe} e <picture> sono due tag che offrono il massimo beneficio con il minimo sforzo. {iframe} sostituirà qualsiasi player video di terze parti con una finestra nativa dotata di picture-in-picture. <picture> elimina la gestione manuale del formato WebP/AVIF; il browser sceglie quello che capisce.

Da lì, scala: <input> con i tipi moderni (color, date, range) eliminerà kilobyte di widget JavaScript. <dialog> rimuove la dipendenza dalle librerie modali. <del>/<ins> mette ordine nel versionamento dei contenuti.

Non devi implementare tutti e 18 i tag in un unico sprint. Inizia con un tag a settimana. Nel giro di sei mesi, il tuo markup sarà semanticamente ricco e il tuo codice auto-documentante, senza una sola riga di JavaScript dove non serve.

Se non sai da dove cominciare, apri il tuo progetto attuale, trova il <div class="..."> più vicino privo di una chiara semantica e sostituiscilo con un tag adatto della lista. La differenza nella leggibilità del codice sarà immediatamente percepibile.