Fin dalle prime versioni di HTML, perché un testo apparisse in grassetto, è stato sufficiente inserirlo in un tag <b>, così come per mettere in corsivo una frase si è utilizzato il tag <i>.
Per una costruzione dei documenti più orientata alla semantica e con le versioni più recenti del liguaggio, è stato consigliato di utilizzare <em> per il corsivo e <strong> per i grassetti. Rispettivamente i due tag stavano per emphasis (enfasi) e strong emphasis (forte enfasi) e i browser assegnano loro come stili proprio il corsivo e il grassetto.
Questa seconda scelta certamente sembra più in linea con il principio della separazione tra contenuto e grafica, secondo cui i tag non dovrebbero definire l'aspetto del testo.
D'altra parte in questo modo si è posto un limite alla presenza dei grassetti perché destinati a poche parole molto importanti. Se questo aspetto può avere un impatto positivo anche su un piano di ritmo tipografico, può tendere a omogeneizzare la stesura dei testi.
Come convivono b, i, em e strong
In HTML5 sono state coniugate le due tradizioni, traendo il meglio da entrambe e valorizzando l'importanza di tag come <b> e <i> che si rivelano utili a dare un ritmo al contenuto, senza tralasciare la semantica.
Cerchiamo di capire quindi come utilizzare i diversi tag facendoci aiutare dalla specifica:
| Tag | Descrizione | Resa di base |
|---|---|---|
| <strong> | Attribuisce al testo una forte importanza, serietà o urgenza (ora strong sta per importance). Aiuta a tematizzare la pagina e può essere utilizzato anche per strategie SEO, può essere utilizzato anche all'interno di headings per indicare la parte più importante di un titolo (es. <h1>Capitolo 1. <strong>La casa</strong></h1>). |
Grassetto |
| <b> | Offre una differenza stilistica rispetto al resto del contenuto, senza attribuire un'importanza specifica al testo (nota: che sia bold o no non importa). | Grassetto |
| <em> | Simile a strong, serve a rappresentare un testo o una frase che si pronuncia in modo differente dal resto al testo. (da emphasis diventa stress emphasis) . | Corsivo |
| <i> | Serve a rappresentare testo che esprima un tono, uno stato d'animo o qualcosa che si discosti dal resto del contenuto, senza aggiungere ulteriori significati o importanza. | Corsivo |
In definitiva si perfeziona la capacità espressiva di "strong" e "em", come pure di "i" e "b", una volta svincolati dalle definizioni di Italic e Bold. Quanto agli stili, ora sono perfettamente confinati nell'ambito dei CSS.
Esempi di utilizzo dei tag strong, em, b e i
La <strong>cucina</strong> è la parte più importante della casa...In questo caso sottolineiamo la parola chiave "cucina" che è la più importante della frase.
La ristrutturazione? Sarebbe ideale avere già tutto
pronto <em>prima del trasloco</em>.Qui poniamo l'accento sul momento in cui completare i lavori a casa.
Anche per le piastrelle del bagno una buona scelta è quella
del <i>gres porcellanato</i>Qui utilizziamo il tag <i> per indicare un termine tecnico.
<b>Ricordi quando ti ho detto che ti avrei ammazzato per ultimo?</b>
Sì, l'hai detto! L'hai detto!
<b>Ti ho mentito.</b>In questo esempio differenziamo lo stile delle frasi pronunciate da Arnold Schwarzenegger in una celebre scena di "Commando".