Enfasi semantica: <strong> vs <b>, <em> vs <i>

Nel browser, <strong>testo</strong> e <b>testo</b> appaiono identici: entrambi in grassetto. Eppure HTML tiene questi quattro tag ben distinti: <strong>/<b> e <em>/<i> perché due di loro parlano al significato e due parlano solo all'occhio.

1. <strong> vs <b>: importanza vs semplice risalto

<strong> indica che il contenuto ha una forte importanza. <b> invece serve a attirare l'attenzione su del testo senza implicare che sia più importante del resto: parole chiave in un riassunto, nomi di prodotto in una recensione, o testo che semplicemente «tipograficamente» si presenterebbe in grassetto.

<p><strong>Attenzione:</strong> questa azione è irreversibile.</p> 
<p>Il nostro riassunto include parole chiave come <b>prestazioni</b>, <b>sicurezza</b> e <b>accessibilità</b>.</p>

Nel primo esempio, «Attenzione» cambia il modo in cui va capito il resto della frase. Nel secondo, le parole in grassetto sono solo evidenziate per essere individuate al volo, nessuna vale più delle altre.

Fonte: MDN Web Docs: «<strong>»: rappresenta un contenuto di forte importanza; «<b>»: attira l'attenzione senza implicare importanza aggiuntiva.

2. <em> vs <i>: enfasi vocale vs voce diversa

<em> segna un'enfasi quella che, letta ad alta voce, cambia il significato della frase. <i> invece rappresenta un testo in una voce o tono diverso, senza alcuna enfasi: termini tecnici, nomi tassonomici, parole straniere, pensieri.

<p>Adoro le carote.</p> 

<p>
   <em>Adoro</em> le carote.
</p> <!-- enfasi: cambia il senso, come detto a voce --> 

<p>
   <i lang="la">Musa</i> è uno dei generi della famiglia <i lang="la">Musaceae</i>.
</p> <!-- nomi tassonomici, nessuna enfasi -->

Il test pratico suggerito dalla documentazione: se leggendo la frase ad alta voce appoggeresti la voce su quella parola, usa <em>; se la parola è semplicemente «di un'altra natura» (straniera, tecnica, un nome scientifico), usa <i>.

Fonte: MDN Web Docs: «<em>»: marca l'enfasi che cambia il significato della frase; «<i>»: rappresenta voce o tono alternativo, designazioni tassonomiche, termini tecnici, frasi idiomatiche in un'altra lingua senza enfasi aggiunta.

3. Perché conta per accessibilità (e non solo)

Qui la differenza smette di essere teorica. <strong> ed <em> hanno un significato che gli screen reader riconoscono e possono comunicare, per esempio, cambiando tono di voce mentre <b> e <i> non trasmettono alcuna enfasi a chi ascolta: restano solo un'indicazione visiva per chi vede lo schermo.

Usare <b> o <i> al posto di <strong>/<em> per «far sembrare importante» qualcosa non è un errore invisibile: per chi naviga con uno screen reader, quell'importanza semplicemente non esiste.

In sintesi

La domanda giusta non è «voglio il grassetto o il corsivo?» ma «questo testo è davvero più importante, o soltanto diverso?». La risposta ti porta dritto al tag corretto e il CSS resta libero di occuparsi solo di come tutto questo appare.