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>
PHP_FUNCTION
{
zval **parameters;
zval *value;
char* str;
</pre>
|
PHP_FUNCTION
{
zval **parameters;
zval *value;
char* str;
|
Il motore di rendering del browser restituisce il testo così come è stato inserito nel file html
dall’autore stesso (preformattato quindi), senza riformattarlo.
È un tag che si usa soprattutto nella rappresentazione di codice di programmazione.
|
|
<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.
|
|
<kbd>keyboard</kbd>
Esempio:
<kbd>digitazione da tastiera</kbd>
|
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
|
Evidenzia una parola. Il testo viene reso in grassetto
|
|
<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.
Se vuoi aggiornamenti su
Scegliere lo stile (grassetto, corsivo & C.)
inserisci la tua e-mail nel box qui sotto: