2.14
Integrare citazioni di frasi famose, segni di citazione e pedici, impiegare acronimi e abbreviazioni, incorporare codice sorgente o altri elementi
All’interno del testo, spesso può essere vantaggioso includere citazioni di frasi celebri, utilizzare apici e pedici, acronimi e abbreviazioni, incorporare codice sorgente o evidenziare specifiche parole. Esaminiamo i tag HTML più comuni per lavorare con il testo.
Citazioni, Cite, e Blockquote
Per citazioni o estratti da altre fonti, il tag <blockquote> è l’ideale. Può contenere il testo citato insieme a riferimenti alla fonte usando <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> Questo elemento di tipo block separerà il blocco citato con un margine a destra e sinistra.
Nella pratica, talvolta è stato erroneamente utilizzato per definire note nel testo.
Il tag <cite> è impiegato per indicare il nome di un’opera o un autore da cui è stata tratta una citazione, ed è visualizzato in corsivo.
Acronimi e Abbreviazioni
Se si desidera definire acronimi o abbreviazioni, si può farlo con i tag <abbr> o <acronym>, sebbene <acronym> non sia più raccomandato nelle specifiche HTML5.
<p><abbr title="World Wide Web">WWW</abbr> è una parte fondamentale di Internet.</p> Codice Sorgente e Altre Evidenziazioni
Per incorporare codice sorgente o evidenziare parti di testo, il tag <code> è usato per rappresentare il testo preformattato, mentre <pre> mantiene il formato predefinito del testo.
<p>Nel codice sorgente, usa il tag <code>printf("Hello, world!");</code> per stampare un messaggio.</p> Questi tag consentono di migliorare la formattazione e la comprensione del testo all’interno del documento HTML.
Acronimi e Abbreviazioni
In passato, per le sigle o gli acronimi, era possibile utilizzare il tag “acronym”, ma è stato successivamente deprecato e sostituito dal tag <abbr>, inizialmente pensato solo per le abbreviazioni.
abbr
Questo tag è utilizzato sia per abbreviazioni come “Sig.” o “Ven.” sia per le sigle come “CSS” o “FIFA”. In ogni caso, lo usiamo quando vogliamo scrivere la versione breve di una frase o di una parola.
È possibile aggiungere la versione estesa o la definizione dell’acronimo utilizzando l’attributo “title”.
<p>In questa guida esploriamo l'<abbr title="HyperText Markup Language">HTML</abbr> e ne scopriamo i tag e le potenzialità espressive.</p> Questo elemento è di tipo inline, e di solito, nella sua rappresentazione predefinita, mostra un tooltip al passaggio del mouse, che fornisce la forma estesa associata all’elemento.
Quando non si tratta di una semplice abbreviazione, ma piuttosto di fornire una definizione di una parola, specialmente una terminologia 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 un tooltip che contiene la spiegazione.
Apici e Pedici
Includere un apice o un pedice è una questione legata al contenuto, non solo all’aspetto tipografico. Ad esempio, pensiamo all’uso dei pedici per numerare variabili in matematica; è strettamente correlato al significato del contenuto.
sup e sub
I tag che usiamo sono <sup> per gli apici e <sub> per i pedici. Entrambi sono elementi inline, e la rappresentazione predefinita nei browser li mostra con il carattere più piccolo, posizionato 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, ad esempio la famosa ‘x’ della scuola, possiamo usare il tag <var>:
<var>x<sub>i</sub></var> Otteniamo così la tipica visualizzazione in corsivo e il pedice per il contatore ‘i’.
Testo Preformattato e Incorporamento di codice
Codice e Testo Pre-formattato
In alcune situazioni, specialmente quando si ha a che fare con il codice, potrebbe essere necessario inserire parole chiave di un linguaggio di programmazione o snippet di testo con formattazione specifica, come spazi o indentazioni. In questi casi, è possibile utilizzare i tag code e pre.
pre All’interno del tag <pre>, è possibile inserire brani di testo con la stessa formattazione dell’editor, ovvero un testo “pre-formattato”. In altre parole, qualsiasi a capo o spazi inseriti all’interno del tag <pre> verranno mantenuti quando il browser lo renderà.
È importante notare che questo tag influenza l’aspetto del testo, e il suo contenuto viene visualizzato con un carattere “monospazio,” in cui ogni lettera ha la stessa larghezza.
code, ma anche kbd e samp Per quanto riguarda la rappresentazione del codice, è possibile specificare il tipo di contenuto del tag <pre> utilizzando altri tag che definiscono la semantica del testo:
<code>: Utilizzato per descrivere brani di codice sorgente.<kbd>: Indica il testo inserito dagli utenti.<samp>: Rappresenta l’output di un programma o di una riga di comando.
Ecco un semplice esempio di uno script che conta da 0 a 4:
<pre> <code> for (i=0;i<5;i++) {
console.log("i = "+i);
} </code> </pre> In questo esempio, il tag <code> viene utilizzato per rappresentare il codice sorgente, mentre il tag <pre> preserva la formattazione specifica del testo all’interno del codice.
Ulteriori elementi per la formattazione del testo
In aggiunta agli elementi precedenti, ci sono altri tag HTML che possono essere utilizzati per formattare il testo in modo specifico. Di seguito, una breve panoramica di tali tag:
<del>: Questo tag è utilizzato per descrivere un contenuto che desideriamo rimuovere dal documento. Tipicamente, traccia una barra sul testo e sostituisce il tag<strike>, che è stato deprecato. Un’alternativa a<del>è<s>, che indica un testo di nessuna importanza all’interno del documento.<ins>: Questo tag è utile per definire aggiornamenti al documento. Grazie all’attributodatetime, è possibile assegnare una data specifica a una porzione del testo per indicare quando è stata inserita o modificata.<mark>: Questo tag rende il testo “evidenziato” e lo rappresenta con un colore di sfondo giallo simile a un evidenziatore. È spesso utilizzato per mettere in risalto parti importanti del testo.<time>: Questo tag consente di specificare in modo formale la data e l’ora di un elemento che riporta una data in un formato qualsiasi. Ad esempio,<time datetime="2016-05-31">il trentun maggio</time>indica la data formattata come “il trentun maggio” con un attributodatetimeche specifica la data in un formato standard.<small>: Questo tag indica un testo che ha un’importanza minore rispetto al resto del documento. Spesso, il testo contrassegnato con<small>viene rappresentato con un carattere più piccolo per indicarne la minore importanza.
Questi tag consentono di applicare formattazioni specifiche e semantica a parti del testo, migliorando la comprensione e l’aspetto del documento.