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…
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:
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.
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.
<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.
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 <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.
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 <strong> dentro altri tag <strong>: 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 <strong> usa <b>. 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.