Se solitamente utilizzi già i tags <strong> ed <em> al posto di <b> e <i> sei già sulla buona strada… Riconsiderare però meglio le differenze di questi elementi in continua evoluzione ci permette di rimanere con gli occhi vigili sul trend che il web semantico sta tracciando. HTML5 cambia molte cose infatti

I tags <b> e <strong>

Nello scrivere markup HTML4/XHTML, siamo stati incoraggiati ad utilizzare il tag <strong> al posto del tag <b>. Infatti il W3schools HTML reference dice che l’elemento <b> (insieme a pochi altri) non è deprecato ma il suo effetto può essere ottenuto, oltre che ampliato, utilizzando i CSS. Il tag <b> quindi perse gran parte del suo valore in quanto non aggiungeva valore semantico al testo, ma un puro e semplice effetto visivo, riproducibile per l’appunto via css.

Usare quindi il CSS per dare una visualizzazione in grassetto ed usare il tag <strong> per dare invece maggior enfasi ad alcuni termini era (ed è tuttora come vedremo) la strada corretta (anche per tutti i benefici SEO che ciò comporta).  In HTML5 le cose sono ancora così ma con qualche piccola differenza. In accordo con le specifiche, il tag <b> va utilizzato per rendere il testo “stilisticamente differente dalla normale prosa senza attribuire ad esso alcuna importanza extra”. Quindi non si tratta più solamente di “rendere in grassetto” un elemento.

L’elemto <strong>, in accordo con le specifiche dal al testo “maggiore importanza per i suoi contenuti”. Quindi il tag <strong> mette il contenuto all’interno di una gerarchia (il che è molto simile a quello che accadeva con HTML4). Quindi, se hai qualche elemento contentuto tra 2 tag strong (e non uno) questo avrà maggiore importanza dell’elemento racchiuso in un tag solo.

Se tutto ciò ti sta confondendo possiamo riassumere in pillole così:

Usa il tag <b> quando vuoi assegnare al testo uno stile diverso senza dare importanza al contesto, ma usa invece il tag  <strong> quando vuoi assegnare importanza maggiore ad un elemento o in ottica SEO. .

I tags <i> e <em>

Allo stesso modo in tag <i> dovrebbe essere considerato in modo differente. Non si tratta più infatti di “Italicizzare” un testo. Ora indica un testo “con una voce o stato d’animo diverso rispetto al resto della prosa” (che è ciò che realmente è un testo “italic”). Similarmente al tag <b>, non viene attribuita importanza rispetto agli elementi circostanti del testo. In accordo con le specifiche si può usare il tag <i> per denominazioni tassonomiche oppure per scrivere una parola in una lingua straniera o anche sequenze di pensieri.

Il tag <em> invece, si utilizza per attribuire maggiore enfasi ad una porzione di testo. Mentre <strong> è usato per creare un gerarchia contestuale, <em> è un semplice modo per enfatizzare qualcosa, allo stesso modo con cui si pone l’enfasi su una frase mentre si parla.

Nuovamente, ricapitolando: And again,

Usa <i> per evidenziare un contrasto tra parole nel testo, ma usa <em> per dare maggiore enfasi.

Come avrai notato, il trend è quello di spingere sempre di più ad una maggior “semanticizzazione” del testo in modo che ogni elemento, così come avviene nella carta stampata, abbia, all’interno di un contesto, la sua caratterizzazione. Non va scordato che tutto ciò è finalizzato anche a migliorare l’accessibilità di un sito, infatti, utilizzando caratterizzazioni tipiche del linguaggio parlato, per esempio si permette ai lettori vocali di rendere più comprensibile ai non vedenti il testo che vogliono leggere.