Nella grafica cartacea con "stile di un testo"
si intende la variante del "tondo", del "corsivo",
o del "grassetto" di un carattere tipografico.
Nel parlare di stili del testo in HTML solitamente si
suddividono i tag in grado di attribuire lo stile al testo in stili
fisici e stili logici:
vengono definiti come fisici quei tag che
definiscono graficamente lo stile del carattere, indipendentemente
dalla funzione del contenuto del tag
vengono definiti come logici quei tag che
forniscono anche informazioni sul ruolo svolto dal contenuto del
tag, e in base a questo adottano uno stile grafico
Gli stili fisici
I principali stili fisici sono:
Codice HTML
|
Visualizzazione
|
Descrizione
|
<b>testo in grassetto</b>
Esempio:
Questo <b>testo</b> è in
grassetto
|
Questo testo è in grassetto
|
Formatta il testo in grassetto.
|
<i>testo in corsivo</i>
Esempio:
Questo <i>testo</i> è in
corsivo
|
Questo testo è in corsivo
|
Formatta il testo in corsivo. Tuttavia bisogna
evitare di evidenziare in corsivo dei blocchi di lunghezza
considerevole, perché la leggibilità del corsivo
nel web lascia a desiderare.
Meglio limitarsi a poche parole.
|
<pre>testo preformattato</pre>
Esempio:
<pre>
Nel mezzo del
cammin di nostra vita
mi ritrovai per
una selva oscura
ché la
diritta via era smarrita.
</pre>
|
Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ché la diritta via era smarrita.
|
Il motore di rendering del browser restituisce il
testo così come è stato inserito nel file html
dall’autore stesso (preformattato quindi), senza
riformattarlo.
Di fatto è un tag poco usato.
|
<u>testo sottolineato</u>
Questo testo è sottolineato
Esempio:
Questo <u>testo</u> è
sottolineato
|
Questo testo è sottolineato
|
Sottolinea il testo presente nel tag.
Nel web le sottolineature del testo sono da
evitare, per non confondere il lettore con i link.
|
<strike>testo
barrato</strike>
Esempio:
Questo <strike>testo</strike> è
barrato
|
Questo testo è barrato
|
Con il testo barrato, vengono indicate (ad
esempio) le correzioni.
|
<sup>testo in apice</sup>
Esempio:
E=mc<sup>2</sup>
|
E=mc2
|
"Superscript": indica al browser di
portare il testo al di sopra della linea di scrittura. Utile per
formule matematiche (ad esempio le potenze)
|
<sub>testo in pedice</sub>
Esempio:
H<sub>2</sub>O
|
H2O
|
"Subscript": indica al browser di
portare il testo al di sotto della linea di scrittura (utile ad
esempio per i simboli chimici)
|
|
Di fatto i tag <b> e <i> sono
molto utilizzati, perché consentono di cambiare lo
stile del testo al volo.
Gli stili logici
Come abbiamo visto gli stili logici forniscono
anche informazioni sul contenuto e la loro formattazione è
spesso lasciata al browser con risultati a volte deludenti. Proprio
per questo gli stili logici sono entrati in disuso e sono poco usati.
Riportiamo di eseguito i principali stili logici, per
completezza, ma non sarà necessario ricordarseli.
Codice HTML
|
Visualizzazione
|
Descrizione
|
<abbr>abbreviazione</<abbr>
Esempio:
<abbr>C/A</abbr> HTML.it
|
C/A HTML.it
|
Indica un abbreviazione. Nessun rendering del
testo particolare
|
<acronym>acronimo</acronym>
Esempio:
<acronym>HTML</acronym>
|
HTML
|
Indica un acronimo. Nessun rendering del testo
particolare
|
<address>indirizzo</address>
Esempio:
<address>HTML.it - via dei Castani 183/185
– 00172 Roma</address>
|
HTML.it - via dei Castani 183/185 – 00172 Roma
|
Serve per indicare gli indirizzi: siano essi
e-mail, o indirizzi fisici. Il testo viene visualizzato in
corsivo
|
<blockquote>blocco di
citazione</blockquote>
Esempio:
<blockquote>
Nel mezzo del cammin di nostra vita mi ritrovai per una selva
oscura ché la diritta via era smarrita
</blockquote>
|
Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita
|
Sono blocchi di citazione.
Il testo viene rientrato verso destra.
|
<cite>citazione</cite>
Esempio:
<cite>
Nel mezzo del cammin di nostra vita mi ritrovai per una selva
oscura ché la diritta via era smarrita
</cite>
|
Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita
|
Per citazioni brevi: il testo è
visualizzato in corsivo.
|
<code>codice</code>
Esempio:
<code>if (document.all) alert
("ciao");</code>
|
if (document.all) alert ("ciao");
|
Indica un blocco di codice in linguaggio di
programmazione. Nessun rendering del testo particolare
|
<dfn>definizione</dfn>
Esempio:
<dfn>L’HTML è un linguaggio di
contrassegno</dfn>
|
L’HTML è un linguaggio di contrassegno
|
Indica una definizione: il testo è
visualizzato in corsivo
|
<em>enfasi</em>
Esempio:
Ti ho detto <em>questo!</em>
|
Ti ho detto questo!
|
Serve per porre l’enfasi su un’espressione:
il testo è visualizzato in corsivo
|
<kdb>keyboard</kdb>
Esempio:
<kdb>digitazione da tastiera</kdb>
|
digitazione da tastiera
|
Indica una digitazione da tastiera: il testo
viene visualizzato a spaziatura fissa
|
<q>citazione all’interno della
frase</q>
Esempio:
Come
diceva Don Abbondio: <q>"Il
coraggio, uno non se lo può dare"</q>
|
Come diceva Don Abbondio: "Il coraggio, uno non se lo può dare"
|
Indica una citazione breve all’interno del
testo. Nessun rendering del testo particolare
|
<samp>esempio</samp>
Esempio:
<samp>ecco un esempio di
"samp"</samp>
|
ecco un esempio di "samp"
|
Indica un esempio. Il testo viene visualizzato a
spaziatura fissa.
|
<strong>rafforzamento</strong>
Esempio:
Ecco un <strong>testo rafforzato</strong>
|
Ecco un testo rafforzato
|
Inseriamo i dati nella variabile temporanea temp …
|
<var>variabile</var>
Esempio:
Inseriamo i dati nella variabile temporanea
<var>temp</var> …
|
Inseriamo i dati nella variabile temporanea temp …
|
La variabile viene visualizzata in corsivo.
|
|
Approfondimenti
Come si può vedere molti tag (logici e fisici)
tradiscono l’origine scientifica e informatica del Web (sono
presenti tag per blocchi di codice di programmazione, per
definizioni, per l’indicazione delle variabili…).
Sorprendentemente nessuno dei tag fisici o logici è
stato dichiarato "deprecato" dal W3C, ma anzi tutti
questi tag sono passati dall’HTML 3.2 originario fino all’XHTML
(passando illesi attraverso l’HTML 4).
Per quel che riguarda i tag fisici: a rigor di logica
lo stile "grassetto" dovrebbe essere ottenuto con i fogli
di stile (così come tutte le formattazioni), ma evidentemente
la possibilità di ottenere un testo in grassetto semplicemente
scrivendo "<b>testo</b>" è
troppo comoda per poter essere considerata obsoleta.
Per quel che riguarda i tag logici: in realtà
questo tipo di tag offrono un ulteriore aiuto al webmaster anche in
un approccio a fogli di stile. Se infatti si ha l’accortezza di
ridefinire i tag all’interno della definizione degli stili, si
hanno molte occasioni di utilizzare una formattazione mirate a
seconda della funzione del contenuto: in quest’ottica, il fatto
che alcuni tag logici non restituiscano nessun rendering particolare
è addirittura un invito a ri-definire lo stile del tag.