Grassetti e corsivi

16 maggio 2016

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:

TagDescrizioneResa 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”.

Tutte le lezioni

1 ... 8 9 10 ... 58

Se vuoi aggiornamenti su Grassetti e corsivi inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Grassetti e corsivi

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy