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>OOutput: 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.
