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

2013/05/29
web

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  e . 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  e , 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,  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:

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 , 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  tag ben più specifici: come <cite> per le citazioni, <var> in caso di variabili, <dfn> per le definizioni.

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

Il tag b

Con HTML5 il tag  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 , anche qui la specifica consiglia fortemente l’uso dei CSS per poter stilizzare l’elemento in seguito.


<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  usa il tag .

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

Infine,  può ancora indicare “testo grassetto”, ma come nel caso del tag , 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:


<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  se intendi servirti di testo corsivo senza dare enfasi alle parole, oppure  se vuoi attribuire importanza al testo. Puoi anche annidare  all’interno di un tag  (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.


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

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


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  usa .

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.