2.13
I tag più comuni per il testo in grassetto e corsivo, e come impiegarli correttamente seguendo le attuali direttive e standard.
Fin dalle prime iterazioni di HTML, per evidenziare un testo in grassetto, era sufficiente avvolgerlo nel tag <b>, mentre per applicare lo stile corsivo si ricorreva al tag <i>.
Tuttavia, con l’evoluzione delle specifiche e l’orientamento verso una struttura più semantica nei documenti, si è cominciato a consigliare l’uso del tag <em> per il corsivo e <strong> per il grassetto. Questi tag, rispettivamente, rappresentano l’emphasis (enfasi) e la strong emphasis (forte enfasi), e i browser attribuiscono loro gli stili di corsivo e grassetto.
Questa modifica sembra allinearsi meglio al principio di separazione tra contenuto e presentazione, che suggerisce che i tag non dovrebbero definire direttamente l’aspetto del testo.
Tuttavia, tale approccio può portare a una limitazione nell’uso dei testi in grassetto, riservati a poche parole di grande importanza. Sebbene ciò possa avere un impatto positivo sul ritmo tipografico, potrebbe anche tendere a uniformare il modo in cui i testi vengono redatti.
Come coesistono <b>, <i>, <em>, e <strong>
Con l’avvento di HTML5, è stata fatta un’integrazione tra le due tradizioni, unendo il meglio di entrambe e riconoscendo il valore dei tag <b> e <i>. Questi tag continuano a offrire un mezzo per dare enfasi e ritmo al contenuto, senza trascurare la semantica.
Per comprendere come utilizzare in modo efficace questi diversi tag, possiamo fare riferimento alle specifiche HTML5:
<strong>: Questo tag attribuisce una forte importanza, serietà o urgenza al testo (ora “strong” rappresenta “importanza”). È utile per la tematizzazione della pagina e può essere impiegato anche per strategie di ottimizzazione per i motori di ricerca (SEO). Può essere utilizzato anche all’interno degli headings per indicare la parte più significativa di un titolo (ad esempio,<h1>Capitolo 1. <strong>La casa</strong></h1>). Il suo effetto principale è la resa in grassetto.<b>: Questo tag offre una differenza stilistica rispetto al resto del contenuto, senza assegnare una specifica importanza al testo (si noti che l’aspetto in grassetto o meno è solo stilistico).<em>: Simile a<strong>,<em>è utilizzato per rappresentare un testo o una frase che dovrebbe essere pronunciata in modo differente dal resto del testo (da “emphasis” diventa “stress emphasis”). La sua resa principale è il corsivo.<i>: Questo tag è utilizzato per rappresentare testo che esprime un tono, uno stato d’animo o qualcosa che si discosta dal resto del contenuto, senza aggiungere ulteriori significati o importanza. La sua resa principale è il corsivo.
In conclusione, l’integrazione tra <strong>, <em>, <i>, e <b> ha affinato la capacità espressiva di questi tag, separando il loro significato dall’aspetto in corsivo o in grassetto. Ora, la gestione degli stili è principalmente affidata ai CSS (Cascading Style Sheets).
ESEMPI
Esempi di Utilizzo dei Tag <strong>, <em>, <b>, e <i> La <strong>cucina</strong> rappresenta il cuore pulsante della casa… In questo caso, mettiamo in evidenza la parola chiave “cucina” per sottolinearne l’importanza nella frase.
Quanto alla ristrutturazione, sarebbe fantastico se tutto fosse già pronto <em>prima del trasloco</em>. Qui, diamo enfasi al momento “prima del trasloco” nel contesto delle lavorazioni a casa.
Per quanto riguarda le piastrelle del bagno, una scelta eccellente è il <i>gres porcellanato</i>. In questo caso, utilizziamo il tag <i> per enfatizzare un termine tecnico.
<b>Con ricordi come “Ti ho detto che ti avrei ammazzato per ultimo?”</b> Sì, è stato detto! È stato detto! <b>Ecco, ti ho mentito.</b> In questo esempio, differenziamo lo stile delle frasi pronunciate da Arnold Schwarzenegger in una celebre scena di “Commando”.