HTML5: il corretto uso dei tag i, b, em e strong

Aggiornato il

HTML5 (diretta evoluzione dell’HTML 4.01, datato 1999), fonda i propri principi sull’innovazione, l’immediatezza, e l’uso di un markup totalmente rivoluzionario. Gli ultimi anni del web sono stati infatti segnati da una progressiva e completa revisione della struttura del linguaggio HTML, e la maggior concentrazione degli sforzi è stata verso il perfezionamento della sua componente semantica.

Molti tag hanno subito una forte “revisione”, e tra questi spiccano gli elementi <i> e <b>. Se fino ad ora venivano soltanto usati con pura funzione stilistica (rispettivamente testo corsivo e testo grassetto), nel nuovo progetto hanno guadagnato un significato completamente nuovo.

Al contrario <strong> e <em>, due tag che avevano già una precisa valenza semantica, sono stati “modellati” in una forma leggermente diversa. Prima erano rispettivamente emphasis (enfasi) e strong emphasis (forte enfasi), ma con HTML5 diventano stress emphasis (qualcosa che si pronuncia in modo differente: “stress” significa anche “accento”) e importance (testo importante).

Vediamoli tutti e quattro in dettaglio…

Il tag i

Fino ad HTML 4.01, <i> indicava soltanto “testo corsivo”, mentre ora è soprattutto “testo in voce alternativa”: termini tecnici, frasi idiomatiche, pensieri, inserti presi da un linguaggio differente… e così via. Un esempio:

Uso del tag i

Il markup diventa:


<p>In inglese "ascensore" si dice <i lang="en">lift</i>, in americano <i lang="en-us">elevator</i></p>

Come vedi, ho anche indicato il linguaggio di riferimento attraverso l’attributo lang="": dato infatti che la specifica consiglia fortemente l’uso del CSS per poter stilizzare l’elemento <i>, la soluzione migliore è che tu riesca ad “agganciarti” al tag in qualche modo.


/* selettore di attributo */
[lang="en"] { ... }

/* selettore di classe */
.nome-classe { ... }

A questo link puoi trovare un ottimo articolo sui vari metodi per selezionare gli elementi HTML con il CSS.

Ci sono casi in cui è più efficace usare al posto di <i> tag ben più specifici: come <cite> per le citazioni, <var> in caso di variabili, <dfn> per le definizioni.

Ripeto: <i> può ancora indicare “testo corsivo”, ma solamente in caso di necessità tipografiche o stilistiche.

Il tag b

Con HTML5 il tag <b> non indica più solamente “testo grassetto”, ma soprattutto “testo stilizzato in modo differente”: parole chiave, nomi di prodotti all’interno di una recensione, la riga iniziale di un capitolo di un libro, o altri casi simili. Sostanzialmente, è testo che per comodità vuoi rendere differente dal resto senza però assegnargli particolare significato o importanza. Come per il tag <i>, anche qui la specifica consiglia fortemente l’uso dei CSS per poter stilizzare l’elemento in seguito.

Uso del tag b

<p><b class="frase-iniziale">L’uomo in nero fuggì nel deserto e il pistolero lo seguì.</b>
<br>Il deserto era l’apoteosi di tutti i deserti, sconfinato, vasto fino a 
<br>traboccare nel cielo per enne parsec in tutte le direzioni.</p>
<p>Stephen King, <b class="titolo-libro">"L’ultimo cavaliere"</b>.</p>

Questa volta, per poter sfruttare il CSS ho aggiunto due classi distinte (class="frase-iniziale", class="titolo-libro"). In entrambi i casi, il testo è differente dal resto per pura necessità stilistica, e non per un significato particolare: nel primo caso è testo rosso, nel secondo è grassetto corsivo. Per aggiungere invece importanza al testo, al posto di <b> usa il tag <strong>.

Esistono anche tag più specifici del tag <b>: uno di questi è <mark>, comodo per “evidenziare” parte del testo.

Infine, <b> può ancora indicare “testo grassetto”, ma come nel caso del tag <i>, solamente per ragioni tipografiche o stilistiche.

Il tag em

Prima era emphasis, ora è diventato stress emphasis: un testo o una frase che si pronuncia in modo differente dal resto. Per esempio:

Uso del tag em

<p><em>Marco</em> è andato a fare la spesa.</p>
<p>Marco è andato <em>a fare la spesa</em>.</p>

A seconda di dove cade l’accento, il significato delle due frasi acquista un valore totalmente diverso: la prima frase sembra rispondere alla domanda “Chi è andato a fare la spesa?”. Nel secondo caso, probabilmente qualcuno ha appena chiesto dove sia andato a finire Marco.

Meglio usare <i> se intendi servirti di testo corsivo senza dare enfasi alle parole, oppure <strong> se vuoi attribuire importanza al testo. Puoi anche annidare <em> all’interno di un tag <strong> (o viceversa) per dare enfasi e importanza allo stesso tempo.

Il tag strong

Se prima indicava strong emphasis, ora significa importance: è in pratica l’unico dei quattro tag menzionati in questo articolo che rimane tale e quale a prima.

Uso del tag strong

<p><strong>Attenzione</strong>: accesso permesso solo agli addetti ai lavori.</p>

Puoi anche annidare il tag <strong> dentro altri tag <strong>: creerai in questo caso una gerarchia relativa di importanza.

Uso del tag strong annidato

Ciò è <strong>importante</strong>. <strong>Molto importante. <strong>E questo ancora di più!</strong></strong>

Se il testo deve essere in grassetto per ragioni puramente stilistiche, al posto di <strong> usa <b>.

Ultime considerazioni

Alla luce di tutto ciò, avrai compreso come HTML5 si discosti totalmente dall’uso dei tag a solo scopo presentazionale, lasciando definitivamente stile, grafica e forma ai fogli CSS: una cosa infatti è il significato dei vari elementi, un’altra è la loro rappresentazione all’interno del browser.

Riferimenti

di Mattia Frigeri