Il tag <abbr>, <dfn>, <mark>, <time>: testo arricchito

Un testo normale scorre via, senza distinzioni. Ma a volte dentro quel testo c'è una sigla da spiegare, un termine da definire, un passaggio rilevante da segnalare, o una data da rendere leggibile a una macchina. HTML ha un tag per ciascuna di queste quattro esigenze.

1. <abbr>: la sigla con la spiegazione integrata

<abbr> segnala che il testo racchiuso è un'abbreviazione. L'attributo title ha qui un significato specifico: deve contenere l'espansione completa e leggibile della sigla ed è proprio quel testo che i browser mostrano come tooltip al passaggio del mouse.

<p>Il <abbr title="World Wide Web Consortium">W3C</abbr> pubblica gli standard del web.</p>

Ogni <abbr> è indipendente dalle altre: dare il title a una istanza non lo attacca automaticamente a un'altra istanza dello stesso testo altrove nella pagina.

Fonte: MDN Web Docs — «<abbr>»: l'attributo title deve contenere una descrizione o espansione leggibile e completa dell'abbreviazione; viene tipicamente mostrato come tooltip.

2. <dfn>: il momento esatto in cui un termine viene definito

<dfn> indica la prima occorrenza di un termine, <dfn> racchiude solo il termine, non la sua definizione; quest'ultima va nel paragrafo, sezione o voce di lista che lo contiene.

<p>Un <dfn>validatore</dfn> è un programma che controlla la sintassi di un documento.</p>

Un uso frequente e utile: combinare <dfn> con <abbr> quando il termine da definire è anche una sigla, il <abbr> annidato fornisce l'espansione, il <dfn> segnala che quello è il punto in cui la definizione avviene.

<p> Il <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> orbita dal 1990. </p>

Fonte: MDN Web Docs — «<dfn>»: rappresenta il termine da definire, non la definizione; se contiene un solo <abbr> con title, quel valore è il termine definito.

3. <mark>: rilevanza, non importanza

<mark> evidenzia un passaggio rilevante rispetto al contesto: per esempio i termini di ricerca dentro un risultato. MDN avverte esplicitamente di non confonderlo con <strong>: <strong> segnala importanza, <mark> segnala rilevanza per l'attività corrente del lettore.

<p>Hai cercato "prototype": trovato in <mark>prototype chain</mark> e in <mark>Object.prototype</mark>.</p>

Nota tecnica utile: molti screen reader non annunciano la presenza di <mark> nella configurazione di default: non dare per scontato che l'evidenziazione arrivi anche a chi ascolta la pagina.

Fonte: MDN Web Docs — «<mark>»: indica rilevanza per l'attività corrente, da non confondere con <strong> che indica importanza; non è annunciato di default dagli screen reader.

4. <time>: la data leggibile sia da un umano sia da una macchina

<time> rappresenta un momento preciso, cioè la data, ora, o durata. Il contenuto visibile può restare scritto in modo naturale («7 luglio»), mentre l'attributo datetime fornisce la stessa informazione in un formato standard, comprensibile da motori di ricerca, calendari e altri software.

<p>
   Il concerto è il 
   <time datetime="2026-07-07">7 luglio</time>, 
   inizia alle <time datetime="20:00">20:00</time> 
   e dura <time datetime="PT2H30M">2h 30m</time>.
</p>

Regola precisa dal manuale MDN: se <time> non ha l'attributo datetime, allora il testo racchiuso deve già essere una data o un'ora scritta in formato valido, non può contenere altro markup annidato in quel caso.

Fonte: MDN Web Docs — «<time>»: l'attributo datetime traduce la data in formato leggibile da macchina; se assente, il contenuto testuale stesso deve essere una data/ora valida.

In sintesi

Quattro tag, quattro modi diversi di dire «questo pezzo di testo ha un ruolo speciale»: al lettore, allo screen reader, o al software che legge il tuo HTML. Nessuno di loro cambia solo l'aspetto: cambiano il significato.