Nel testo può essere utile inserire citazioni di frasi celebri, apici e pedici, usare degli acronimi e delle abbreviazioni, codice sorgente o demarcare alcune parole. Esaminiamo gli elementi HTML più utilizzati per lavorare sui testi.
Citazioni, cite e blockquote
blockquote
Secondo la specifica HTML5 il <blockquote> è un elemento che ospita contenuti citati da altre fonti, fossero pure i commenti di altri utenti in un blog. Inoltre al suo interno possono apparire anche dei rimandi alla fonte contenuti in elementi cite o footer.
<blockquote>
<p>[...] fatti non foste a viver come bruti, ma per seguir virtute e canoscenza</p>
<cite>Inferno Canto XXVI - La Divina Commedia</cite>
</blockquote>Si tratta di un elemento di tipo block e nella rappresentazione di base dei browser il blocco viene separato dal resto del testo con un margine a destra e a sinistra.
Nella prassi questo tag è spesso stato utilizzato (pur impropriamente) per definire delle note nel testo.
cite
il tag <cite> serve per riportare il nome di un'opera di ingegno, ad esempio il titolo di un libro, di un film o di una canzone dalla quale si è tratta una citazione, oppure ancora il nome di un autore o del personaggio che ha coniato una frase. È un elemento inline e di base appare in corsivo.
q
Se vogliamo inserire delle citazioni direttamente all'interno di un testo, possiamo utilizzare il tag <q>, un elemento inline che si può utilizzare per specificare una frase presa da un'opera lettaria o da una fonte, senza doverle dedicare un blocco separato:
<p>Avrei spronato i miei colleghi a fare di più, li avrei incalzati citando
<cite>Dante Alighieri</cite>: "<q>Fatti non foste a viver come bruti</q>".</p>Acronimi e abbreviazioni
In passato per le sigle o gli acronimi era possibile utilizzare il tag acronym che è stato poi deprecato e soppiantato dal tag <abbr> prima previsto solo per le abbreviazioni.
abbr
Questo tag viene utilizzato sia per abbreviazioni come "Sig.", "Ven.", sia per le sigle come CSS o FIFA. In ogni caso lo utilizziamo quando scriviamo la versione breve di una frase o una parola.
Possiamo aggiungere la versione lunga o la definizione dell'acronimo grazie all'attributo title.
<p>In questa guida approfondiamo l'<abbr title="HyperText Markup Language">HTML</abbr>
e ne esploriamo i tag e le potenzialità espressive.</p>Si tratta di un elemento inline e la sua rappresentazione di default tipicamente mostra un tooltip al passaggio del mouse, che riporta proprio il testo per esteso associato all'elemento.
Quando non si tratta di abbreviare ma di dare una definizione di una parola, ad esempio una parola tecnica, possiamo utilizzare <dfn>:
<dfn title="Insieme di componenti software, che rende operativi computer, apparati e dispositivi informatici">Sistema Operativo</dfn>La rappresentazione di base è simile a quella di abbr e anche in questo caso è previsto il tooltip che contiene la spiegazione.
Apici e pedici
Inserire un apice o un pedice è qualcosa che ha a che fare con la tipografia o con l'aspetto? Non siamo nemmeno troppo a metà strada, pensiamo all'utilizzo dei pedici ad esempio, per inserire la numerazione nelle variabili in matematica, è qualcosa che è strettamente correlato con il contenuto.
sup e sub
I tag che utilizziamo sono <sup> per gli apici e <sub> per i pedici. Sono entrambi elementi inline e la rappresentazione di default sui browser è quella che ci aspettiamo, carattere rimpicciolito e posto più in alto o più in basso a seconda che si tratti di un apice o di un pedice.
Ecco un celebre esempio:
E = mc<sup>2</sup>
Se vogliamo rappresentare una variabile, la famosa 'x' della scuola possiamo usare il tag <var>:
<var>x<sub>i</sub></var>Ottenendo la tipica visualizzazione in corsivo e il pedice per il contatore 'i'.
Codice e testo pre formattato
Può capitare, soprattutto a chi ha a che fare con il codice, di avere la necessità di inserire nel testo le keyword di un linguaggio di programmazione, oppure snippet più o meno lunghi che abbiano una formattazione specifica (pensiamo agli spazi o alle indentazioni). In questi casi si possono utilizzare i tag code e pre.
pre
All'interno del tag <pre> possiamo scrivere brani di testo che seguano la stessa formattazione che impostiamo nell'editor, un testo "pre-formattato" appunto. In altre parole se all'interno del tag <pre> e sull'editor andiamo a capo o inseriamo molti spazi tra una parola e l'altra, obbligheremo il browser a fare altrettanto.
Va detto che questo tag forza un po' la mano sulla questione dell'aspetto e tipicamente il suo contenuto viene rappresentato con un carattere "monospaced" (tutte le lettere hanno la stessa larghezza).
code, ma anche kbd e samp
Per tornare alle questioni più strettamente legate alla rappresentazione del codice, possiamo specificare il tipo di contenuto del tag pre grazie all'inserimento di altri tag che definiscono la semantica del testo:
| Tag | Descrizione |
|---|---|
| <code> | Descrive brani di codice sorgente |
| <kbd> | Indica il testo inserito dagli utenti |
| <samp> | Rappresenta l'output di un programma o di una riga di comando |
Facciamo un semplice esempio di un piccolo script che conta da 0 a 4:
<pre>
<code>
for (i=0;i<5;i++) {
console.log("i = "+i);
}
</code>
</pre>
Altri elementi per la formattazione del testo
| Tag | Descrizione | |
|---|---|---|
| <del> | Descrive un contenuto che vogliamo togliere dal documento, tipicamente traccia una barra sul testo e sostituisce <strike>, già deprecato. Una alternativa a del è <s> che indica un testo di nessuna importanza all'interno del documento. |
|
| <ins> | Può essere utile per definire degli aggiornamenti al documento: grazie all'attributo datetime possiamo infatti assegnare una data specifica a una porzione del testo. |
|
| <mark> | Rende il testo "evidenziato", rappresentato non a caso con un colore di sfondo giallino "evidenziatore" | |
| <time> | Grazie all'attributo datetime, consente di specificare in modo formale la data e l'ora di un elemento che riporta una data in un formato qualsiasi. (es. <time datetime="2016-05-31">il trentun maggio</time>) |
|
| <small> | Indica un testo che ha una importanza minore rispetto al resto del documento e viene spesso rappresentato con un carattere più piccolo. |