Il tag HTML <dfn>
Il tag HTML <dfn> segna l'istanza definitoria di un termine. Scopri come differisce da <i>/<em>, con esempi di title, <abbr> e id.
Il tag HTML <dfn> segna l'istanza definitoria di un termine — il punto nel testo in cui quel termine viene introdotto e spiegato. I browser rendono il suo contenuto in corsivo per impostazione predefinita, ma il tag riguarda il significato, non l'aspetto: indica al browser, ai motori di ricerca e alle tecnologie assistive "qui viene definita questa parola."
Perché usare <dfn> invece di <i> o <em>?
È tentante ricorrere a <i> o <em> per mettere in corsivo un termine, ma quei tag non forniscono alcuna informazione su cosa significa il testo:
<i>è puramente stilistico — testo in corsivo senza semantica speciale.<em>segna l'enfasi (un cambiamento nell'intonazione parlata), non una definizione.<dfn>è semantico e leggibile dalla macchina: identifica esplicitamente il termine che viene definito. I lettori di schermo possono annunciarlo come una definizione, e gli strumenti possono creare glossari da esso.
Quindi quando il corsivo esiste perché un termine viene definito per la prima volta, usa <dfn>. Quando vuoi semplicemente il corsivo o l'enfasi, usa <i> o <em>.
Sintassi
Il tag <dfn> viene usato a coppie — il contenuto è scritto tra il tag di apertura <dfn> e il tag di chiusura </dfn>.
Il tag <p> circostante, la coppia <dt>/<dd>, o il tag <section> funge da contesto della definizione per il termine: il termine definito da <dfn> dovrebbe essere spiegato all'interno dello stesso blocco.
Esempio base del tag HTML <dfn>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><dfn>HTML</dfn> (HyperText Markup Language) — the standardized markup language for documents on the World Wide Web. Most web pages contain a description of the markup in the HTML language.</p>
</body>
</html>
Come viene identificato il termine definito
Il browser decide quale parola sta definendo un <dfn> utilizzando queste regole, nell'ordine:
- Se
<dfn>ha un attributotitle, il valore dititleè il termine che viene definito. Il testo visibile può quindi essere un'abbreviazione (spesso usando<abbr>). - Se
<dfn>ha esattamente un figlio — un elemento<abbr>con un attributotitle— e<dfn>non ha altro contenuto testuale, allora iltitledi<abbr>è il termine che viene definito. - Altrimenti, il contenuto testuale visibile di
<dfn>è il termine che viene definito.
Esempio con un attributo title
Qui il valore di title viene trattato come il termine completo che viene definito, mentre il testo visibile rimane breve:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Mouse over to see the definition.</p>
<dfn title="HyperText Markup Language">HTML</dfn>
</body>
</html>Il tooltip title appare solo al passaggio del mouse, quindi è invisibile agli utenti che usano la tastiera o il tocco. Non inserire mai informazioni essenziali solo in title — abbina il termine a un testo esplicativo visibile, oppure usa <abbr> in modo che l'espansione sia disponibile semanticamente.
Esempio con il tag <abbr>
Combinare <dfn> con <abbr> è un pattern comune e accessibile: <dfn> segna l'istanza definitoria, e <abbr> fornisce l'espansione completa tramite il suo title.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Mouse over to see the definition.</p>
<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>
</body>
</html>Collegare di nuovo a una definizione con un id
Se aggiungi un id a un <dfn>, puoi collegarti ad esso da qualsiasi punto della pagina con un elemento <a> usando un frammento (#). Questo permette ai lettori di saltare direttamente al punto in cui un termine viene definito:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
<dfn id="ajax-def">AJAX</dfn> is a technique for updating parts of a
web page without reloading the whole page.
</p>
<p>Later on, we mention <a href="#ajax-def">AJAX</a> again — click the
link to jump back to its definition.</p>
</body>
</html>Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| title | testo | Fornisce la definizione completa o la forma estesa del termine. Quando presente, sostituisce il termine predefinito e viene mostrato come tooltip al passaggio del mouse. |
Il tag <dfn> supporta anche gli Attributi Globali e gli Attributi Evento.
Come applicare uno stile al tag HTML <dfn>
dfn {
color: #0056b3;
font-weight: bold;
}