back to top

Stilizzare il testo in HTML: grassetto, corsivo, sottolineato, ecc.

Come più volte detto nella precedente lezione, oggi la formattazione del testo non può prescindere dall’utilizzo dei CSS soprattutto per quanto attiene all’utilizzo del tag <font> (ormai deprecato). Discorso (parzialmente) diverso è quello che attiene alla stilizzazione del testo mediante l’utilizzo di grassetto, corsivo, sottolineato, ecc.

In questi casi, infatti, l’utilizzo del markup HTML non può dirsi "superato" in quanto, seppure con CSS sia possibile riprodurre ogni stile, l’utilizzo dei tag HTML è importante sia a livelo di accessibilità dei documenti che da un punto di vista SEO.

I "tag stilistici" del testo, se così li vogliamo chiamare, possono essere divisi in due categorie: tag fisici (phisical tags) e logici (logical tags).

Tag fisici

Sono definiti "fisici" i tag HTML il cui scopo è, semplicemente, quello di applicare una determinata formattazione stilistica al testo. I tag fisici di formattazione del testo sono:

Il tag <b> – bold / grassetto

E’ utilizzato per applicare lo stile grassetto ad un testo:

Applico lo stile <b>grassetto</b>

Il tag <i> – italic / italico (anche detto corsivo)

E’ utilizzato per applicare lo stile italico ad un testo:

Applico lo stile <i>italico</i>

Il tag <u> – underline / sottolineato

E’ utilizzato per applicare lo stile sottolineato ad un testo:

Applico lo stile <u>sottolineato</u>

Il tag <s> e <strike> – barrato

E’ utilizzato per applicare lo stile barrato ad un testo:

Applico lo stile <s>barrato</s>

i tag <big> e <small>

Questi tag sono utilizzati per scrivere un testo utilizzando una dimensione grande (big) o piccola (small) del font specificato:

Scrivo in <big>grande</big>...
...e ora in <small>piccolo</small>

I tag <sup> e <sub>

Questi tag sono utilizzati per scrivere, rispettivamente, un testo in apice (sup) o in pedice (sub). Vediamo due semplici esempi:

E = mc<sup>2</sup>

Output: E = mc2

H<sub>2</sub>O

Output: H2O

Il tag <tt>

Formatta il testo utilizzando un carattere a larghezza fissa:

<tt>Testo formattato con font a larghezza fissa</tt>

Output:

Testo formattato con font a larghezza fissa

Tag logici

I tag logici per la formattazione del testo hanno lo scopo non solo di modificare l’aspetto visivo di una stringa ma anche, e soprattutto, di definirne il significato. Attraverso i tag logici, ad esempio, possiamo qualificare una frase come una citazione, un testo come cancellato, una parola come importante ecc. L’importanza di questi tag, pertanto, non è nel risultato visivo ma nella loro capacità di definire in modo inequivocabile il senso, l’importanza ed il "perchè" di determinate parole del testo.

Il tag <strong> – importante

Il risultato visivo del tag <strong> è analogo al tag <b> (ovvero applica un grassetto al testo) ma, a differenza di quest’ultimo, indica anche che la parola o la frase marcata riveste una grande importanza nell’economia della pagina web.

Questa è una parola <strong>molto importante</strong>

Il tag <em> – enfasi

Il risultato visivo del tag <em> è analogo al tag <i> (ovvero applica uno stile italico al testo) ma, a differenza di quest’ultimo, indica anche che la parola o la frase marcata debba essere interpretata con una certa enfasi.

Questa è una parola da <em>enfatizzare</em>

Il tag <dfn> – definizione

Questo tag viene utilizzato per indicare che una data frase è una definizione. Visivamente il tag <dfn> applica uno stile italico al testo marcato.

Questa è una <dfn>definizione</dfn>

Il tag <del> – cancellato

Questo tag viene utilizzato per indicare che una data frase è stata cancellata. Visivamente il tag <del> applica uno stile barrato al testo marcato identico al tag <strike>.

Questa parola viene <del>cancellata</del>

Il tag <ins> – inserito

Questo tag viene utilizzato per indicare che una data frase è stata inserita all’interno di un testo in cui, originariamente, non era presente. Visivamente il tag <ins> applica uno stile sottolineato identico al tag <u>.

Questa testo è stato <ins>inserito</ins>

Il tag <cite> – citazione

Questo tag viene utilizzato per indicare che una data frase è una citazione. Visivamente il tag <cite> applica uno stile italiaco al testo marcato identico al tag <i>.

Questa frase è una <cite>citazione</cite>

Il tag <acronym> – acronimo

Questo tag viene utilizzato per indicare che una data parola è un acronimo. Solitamente viene accompagnato con l’attributo title per indicarne il significato:

Ci sentiamo <acronym title="As Soon As Possible">ASAP</acronym>

Il tag <abbr> – abbreviazione

Questo tag viene utilizzato per indicare che una data parola è un’abbreviazione. Solitamente viene accompagnato con l’attributo title per indicare il significato esteso:

Questa pagina è un documento <abbr title="Hypertext Markup Language">HTML</abbr>

Il tag <address> – indirizzo

Questo tag di HTML viene utilizzato per marcare le informazioni di contatto dell’autore di una pagina web. Visivamente il tag <cite> applica uno stile italiaco al testo marcato identico al tag <i>.

<address>
Scritto da Mario Rossi
Via Garibaldi 123
20100 Milano (MI)
<address>

Il tag <code> – codice

Questo tag viene utilizzato per indicare che un determinato blocco di testo è un codice di programmazione. Visivamente il tag <code> applica uno stile con font a larghezza fissa (di solito courier new).

<code>var somma = 1 + 1;</codee>

Considerazioni conclusive sui tag di formattazione del testo

Si consiglia l’utilizzo di b e strong ai fini della marcatura di parole chiave importanti per l’indicizzazione nei motori di ricerca. Una certa importanza SEO è rivestita anche dai tag i e em attraverso le quali è consigliabile marcare keyword di importanza accessoria o secondaria.

E’ sconsigliato, infine, l’utilizzo del tag u (underline) perchè rende il testo simile ad un link, ed il fatto che non sia cliccabile (non essendo un link) potrebbe essere fuorviante per gli utenti.

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).