Guida di HTML (base)

Formattare il testo (2)

Nonostante l'articolo precedente fosse piuttosto corposo, non abbiamo ancora finito di parlare della gestione del testo in HTML.

In questo capitolo vedremo come arricchire il testo, separando ed "etichettando" correttamente le diverse parti che lo compongono.

Stili logici

Come si è detto nel capitolo precedente, lo scopo del moderno HTML è definire la struttura logica della pagina. Per fare questo esistono numerosi tag.

Rafforzamento ed enfasi

I primi tag che vediamo, <strong> ed <em> sono talmente frequenti che si introducono da sè:

<p>I concetti più importanti devono essere </strong>in rilievo<strong> rispetto agli altri.</p>
<p>L'enfasi su una parola aggiunge un'<em>affordance</em>, che spinge il lettore a soffermarsi sul significato.</p>

Questo codice viene rappresentato così:

Enfasi e rafforzamento

Sembra molto semplice: <strong> corrisponde al grassetto, mentre <em> al corsivo... NO! <strong> e <em> sono attributi di formattazione logica (al contrario di <b> e <i>, che sono i veri tag per grassetto e corsivo): non ha senso fare osservazioni sul loro aspetto, ma solo sul loro significato. Tra l'altro, l'aspetto di questi tag può essere scelto a piacere dal creatore della pagina web, con l'uso dei fogli di stile.

Il tag <strong>, come si intuisce dal nome, indica il rafforzamento, e marca una parola che nella frase ha particolare importanza, e che deve quindi spiccare su tutte le altre. È importante usare questo tag, perchè spesso chi legge le nostre pagine web lo fa velocemente, cercando di cogliere solo i concetti essenziali: se questi sono in rilievo rispetto agli altri la navigazione risulterà più piacevole. Le parole marcate con <strong> sono generalmente visualizzate in grassetto.

Il tag <em> (em sta per emphasis) indica l'enfasi. Si usa per marcare quelle parti del discorso che vanno pronunciate con espressione, in quanto richiedono una particolare attenzione da parte del lettore, come ad esempio i termini in inglese, o quelli da pronunciare in tono ironico (es. "Si sa che nessuno utilizza copie pirata di Windows..."), piuttosto che pezzi di discorso diretto nella frase (es. "Mi ha fatto un cenno con la mano, ed ho risposto con un "Ciao!"").

Per capire l'importanza dell'enfasi in un discorso, si consideri anche questa frase:

"Emphasis si traduce in italiano con enfasi"

Così com'è scritta, non è una frase immediata da capire: non è immediato che "Emphasis" sia un termine straniero (potrebbe essere un nome prorpio), e l'espressione "con enfasi" potrebbe essere interpreta letteralmente (col significato di "in modo enfatico"). Utilizzando correttamente il tag <em> si può rendere più leggibile il periodo:

"Emphasis si traduce in italiano con enfasi"

In questo modo si capisce che Emphasis ed enfasi sono parole con un ruolo particolare nella frase, e che quantomeno non vanno interpretate letteralemnte; si osservi che in questo caso l'enfasi ha la stessa funzione delle virgolette.

Testo preformattato

Ricordate cosa succede se, nel codice html, scrivo qualcosa come questo?

È bello ritornar "normalità", 
è facile tornare con le tante stanche pecore bianche! 
Scusate, non mi lego a questa schiera: 
morrò pecora nera! 
                 F. Guccini

Otterrò lo spiacevole effetto di vedere ignorati spazi e ritorno a capo: tutto il testo sarà visualizzato di seguito (chi non ha le idee chiare in merito può rileggere il capitolo precedente di questa guida).

Come abbiamo già visto, possiamo risolvere il problema utilizzando i tag <p> e <br />, duplicando gli spazi con &nbsp;. A volte però è necessario chiedere all'HTML di non interferire con la formattazione del testo, lasciandolo così come è stato scritto: il tag <pre> (che sta per preformatted) serve proprio a questo:

<pre>
È bello ritornar "normalità", 
è facile tornare con le tante stanche pecore bianche! 
Scusate, non mi lego a questa schiera: 
morrò pecora nera! 
                 F. Guccini
</pre>
Questo codice sarà visualizzato come:

Testo preformattato

Notiamo due cose:

  • Come previsto, la formattazione del testo è stata effettivamente mantenuta: se nel codice il testo va a capo, nella pagina il testo va a capo; se nel codice c'è più di uno spazio, nella pagina ci sono tanti spazi quanti ce ne sono nel codice.
  • Il testo è visualizzato con un carattere strano, diverso dal testo normale. Questo perchè il testo preformattato è generalmente visualizzato con un font a spaziatura fissa (monospace, in inglese); tipicamente si tratta di Courier New, Lucida Sans Typewriter, Liberation Mono e compagni...

I font a spaziatura fissa sono quei caratteri strani, un po' squadrati, i classici tipi di carattere che si vedono sugli schermi dei vecchi computer, o in tutti i film in cui l'hacker di turno risolve la situazione impartendo oscuri (e improbabili) comandi alle sue macchine. Più correttamente diciamo che un font a spaziatura fissa è un font in cui tutti i caratteri occupano lo stesso spazio in orizzontale; guarda queste stesse righe: una i è molto più stretta di una o, e di conseguenza occupa meno spazio sulla riga. In un carattere a spaziatura fissa questo non succede: ogni lettera occupa lo stesso spazio. Questo permette di avere maggiore controllo sulla formattazione del testo:

Spaziatura fissa vs. spaziatura variabile
La stessa tabella visualizzata con il carattere predefinito di <pre>, a spaziatura fissa (sopra), e forzando la visualizzazione con il carattere Arial, a spaziatura variabile (sotto)

Nella figura qua sopra è evidente come un carattere a spaziatura fissa sia indispensabile per visualizzare correttamente la tabella presente nel codice. Non ci soffermiamo sull'attributo style, con cui è stato impostato il carattere Arial: sarà argomento della guida sui fogli di stile.

Abbreviazioni e acronimi

Come sappiamo bene, il mondo informatico (e non solo!) è ricco di sigle, abbreviazioni e acronimi vari; si consideri per esempio questa frase:

Il linguaggio degli SMS è ricco di abbreviazioni: tvb, cvd, etc. sono stratagemmi per risparmiare spazio!.

Per molti lettori le sigle contenute nella frase (SMS, tvb, cvd...) sono ovvie, ma quando scrivi una pagina web non puoi dare per scontato che tutti i navigatori conoscano tutto ciò che scrivi! Per questo è buona norma, quando si usano delle sigle "astruse", specificarne il significato con i tag <abbr> e <acronym>:

<p>Il linguaggio degli <acronym title="Short Message System">SMS</acronym> è ricco di 
abbreviazioni: <abbr title="ti voglio bene">tvb</abbr>, <abbr title="ci vediamo">cvd
</abbr>, <abbr title="et coetera">etc.</abbr> sono stratagemmi per risparmiare spazio!</p>
Questo codice sarà visualizzato così:

Il linguaggio degli SMS è ricco di abbreviazioni: tvb, cvd, etc. sono stratagemmi per risparmiare spazio!

Soffermandosi con il mouse sopra a ciascuna delle sigle sottolineate, il browser mostrerà il significato della sigla in questione.

Veniamo ora ad una domanda semplice, ma molto ragionevole: che differenza c'è tra <abbr> e <acronym>? La differenza in realtà è molto sottile: <abbr> sta per abbreviazione, <acronym> per acronimo.

Un'abbreviazione è un modo più corto per scrivere una parola lunga; ad esempio Es. è un'abbreviazione per il termine più lungo Esempio.

Un acronimo invece è una vera e propria parola di uso comune, ma con la particolarità che le lettere che compongono la parola sono iniziali di altri termini; ad esempio, HTML è un acronimo, le cui lettere stanno per Hyper Text Markup Language.

Faccio notare che la differenza tra abbreviazioni ed acronimi è piuttosto sottile, e presenta delle ambiguità; si prenda ad esempio la sigla F.B.I.: è certamente un'abbreviazione, in quanto le singole lettere rappresentano il vero nome della famosa agenzia investigativa; tuttavia il termine FBI è entrato nell'uso comune, tanto che può essere considerato come una parola di uso comune: in questo senso FBI è un acronimo.

Altri stili logici

Esistono poi altri stili logici, meno usati dei precedenti, che possono essere usati per definire meglio la struttura dei contenuti.

Citazioni e definizioni

<cite>

Marca un riferimento a fonti esterne.

Esempio:

Ne <cite>L'interpretazione dei sogni</cite>, Freud definisce un'immagine ipermnestica
 come un lontano ricordo evocato in un sogno.
Un'immagine ipermnestica è, secondo <cite title="Sigmund Freud: 'L'interpretazione dei sogni', Bollati
 Boringhieri, 1985">Freud</cite>, un lontano ricordo evocato in un sogno.

Il risultato in quest'ultimo caso sarà il seguente:

Un'immagine ipermnestica è, secondo Freud un lontano ricordo evocato in un sogno.

<q>

Sta per quote (citazione), marca il contenuto di una citazione, o un frammento di discorso diretto.

Esempio:

Già Cicerone ammoniva: <q>O tempora, o mores!</q>.

Ad una citazione può essere associata una lingua:

Già Cicerone ammoniva: <q lang="la">O tempora, o mores!</q>.

Spesso il tag <q> è usato in coppia con <cite>:

Già <cite title="M. T. Cicerone, Oratio in L. Catilinam I, I, 2">Cicerone</cite> 
ammoniva: <q lang="la">O tempora, o mores!</q>.

Il risultato in quest'ultimo caso sarà il seguente (si noti che il browser aggiunge le virgolette per delimitare le citazioni):

Già Cicerone ammoniva: O tempora, o mores!.

<blockquote>

Come <q>, con la differenza che qui la citazione è un blocco separato dal resto del testo.

Esempio:

Da <cite>Il pendolo di Foucault</cite>, di Umberto Eco:
<blockquote>Su Abulafia la parola d'ordine poteva essere di sette lettere. Quante
permutazioni di sette lettere si potevano dare con le venticinque lettere
dell'alfabeto, calcolando anche le ripetizioni, perchè nulla impediva che
la parola fosse "cadabra"? Esiste la formula da qualche parte, e il risultato
dovrebbe vare sei miliardi e qualcosa. [...] sapevo che Abulafia impiegava
circa dieci secondi per chiedere e poi verificare il password. Dunque, sessanta
miliardi di secondi. Visto che in un anno di secondi ve ne sono poco più di
trentun milioni, facciamo trenta per arrotondare, il tempo di lavoro sarebbe
stato di circa duemila anni. Non male.<blockquote>

Il risultato in quest'ultimo caso sarà il seguente (si noti che il testo è automaticamente rientrato verso destra):

Da Il pendolo di Foucault, di Umberto Eco:

Su Abulafia la parola d'ordine poteva essere di sette lettere. Quante permutazioni di sette lettere si potevano dare con le venticinque lettere dell'alfabeto, calcolando anche le ripetizioni, perchè nulla impediva che la parola fosse "cadabra"? Esiste la formula da qualche parte, e il risultato dovrebbe vare sei miliardi e qualcosa. [...] sapevo che Abulafia impiegava circa dieci secondi per chiedere e poi verificare il password. Dunque, sessanta miliardi di secondi. Visto che in un anno di secondi ve ne sono poco più di trentun milioni, facciamo trenta per arrotondare, il tempo di lavoro sarebbe stato di circa duemila anni. Non male.

<dfn>

Sta per definition (definizione), e intuitivamente marca una definizione.

Esempio:

La <dfn>circonferenza</dfn> è il luogo dei punti equidistanti da un punto detto centro.

Informatica

Molti tag sono specificatamente pensati per il mondo dell'informatica, ed in particolare della programmazione:

<code>
Marca una frammento di codice per computer.
<samp>
Sta per sample, marca un esempio di output di un programma per computer.
<kbd>
Sta per keyboard, marca un testo che si suppone sia scritto con la tastiera del computer.
<var>
Marca il nome di una variabile.

Stili fisici

HTML mette a disposizione molti tag fatti apposta per specificare l'aspetto delle pagine: cambiare il colore del testo, impostare il grassetto, aggiungere bordi, modificare margini, dimensioni, allineamento ecc...

Come abbiamo già detto, tuttavia, con l'introduzione dei fogli di stile questi tag sono caduti in disuso, e si sconsiglia di utilizzarli nelle pagine web, perchè gli stessi (e anche migliori) risultati possono essere ottenuti allegando ad una pagina un foglio di stile.

Per questo motivo in questa guida non trattiamo nessuno dei tag per la formattazione fisica; solo per completezza, riporto un elenco dei più noti e, in passato, usati:

<b>, <center>, <font>, <i>, <strike>, <tt>, <u>.

In breve...

In questo capitolo abbiamo visto che:

  • Alcuni segmenti di testo, che hanno una funzione particolare nella pagina, possono essere formattati logicamente con degli appositi tag.
  • Spesso i tag di formattazione logica sono visualizzati, anche fisicamente in modo diverso; tuttavia questo non è importante: l'aspetto di ogni tag può essere modificato a piacere, creando ed associando un foglio di stile CSS alla pagina.
  • Il tag <em> marca l'enfasi, ed è generalmente visualizzato in corsivo.
  • Il tag <strong> marca il rafforzamento, ed è generalmente visualizzato in grassetto.
  • Il tag <pre> rende il testo preformattato. Un testo preformattato rispetta spazi e ritorni a capo esattamente come sono scritti, ed è generalmente visualizzato con un carattere a spaziatura fissa.
    • In un font a spaziatura fissa (in inglese monospace) tutti i caratteri hanno la stessa larghezza, cosa che non avviene con i normali font (Times New Roman, Arial, ecc...)
  • I tag <abbr> e <acronym> marcano rispettivamente abbreviazioni ed acronimi.
    • Un'abbreviazione è un modo più corto di scrivere una parola più lunga (ad esempio Sig. per Signore);
    • Un acronimo è una parola di uso comune, le cui lettere sono iniziali di altre parole (ad esempio GNU per GNU is Not Unix, che è addirittura un acronimo ricorsivo).
  • Citazioni e definizioni possono essere rese con i tag <cite>, <q>, <blockquote> e <dfn>.
  • Se si vogliono riportare frammenti di codice per computer possono essere utili i tag <code>, <samp>, <kbd> e <var>.
  • Esistono poi diversi tag e attributi di formattazione fisica, ma non li tratteremo in questa guida, poichè allo stato attuale esistono tecnologie migliori (i fogli di stile CSS) per ottenere risultati uguali o migliori.
  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag