html p 18, Scegliere lo stile (grassetto, corsivo & C.)

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

testo in grassetto

Esempio:

Questo testo è in grassetto
Questo testo è in grassetto
Formatta il testo in grassetto.

testo in corsivo

Esempio:

Questo testo è 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.

testo preformattato

Esempio:

PHP_FUNCTION
{
 zval **parameters;
 zval *value;
 char* str;

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.

testo sottolineato

Questo testo è sottolineato

Esempio:

Questo testo è 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.

testo barrato

Esempio:

Questo testo è barrato
Questo testo è barrato
Con il testo barrato, vengono indicate (ad esempio) le correzioni.

^{testo in apice}

Esempio:

E=mc²
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)

_{testo in pedice}

Esempio:

H₂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 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

abbreviazione</<abbr>

Esempio:

<abbr>C/A HTML.it
C/A HTML.it
Indica un abbreviazione. Nessun rendering del testo particolare.

acronimo

Esempio:

HTML
HTML
Indica un acronimo. Nessun rendering del testo particolare.

indirizzo

Esempio:

HTML.it - via dei Castani 183/185 – 00172 Roma

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.

blocco di citazione

Esempio:

Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita

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.

citazione

Esempio:

Nel mezzo del cammin di
nostra vita mi ritrovai per una selva oscura ché la diritta via era smarrita
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.

codice

Esempio:

if (document.all) alert ("ciao");
if (document.all) alert ("ciao");
Indica un blocco di codice in linguaggio di programmazione. Nessun rendering del testo particolare.

definizione

Esempio:

L’HTML è un linguaggio di contrassegno
L'HTML è un linguaggio di contrassegno
Indica una definizione: il testo è visualizzato in corsivo.

enfasi

Esempio:

Ti ho detto questo!
Ti ho detto questo!
Serve per porre l’enfasi su un’espressione: il testo è visualizzato in corsivo.

keyboard

Esempio:

digitazione da tastiera
digitazione da tastiera
Indica una digitazione da tastiera: il testo viene visualizzato a spaziatura fissa.

citazione all’interno della frase

Esempio:

Come diceva Don Abbondio: "Il coraggio, uno non se lo può dare".
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.

esempio

Esempio:

ecco un esempio di "samp".
ecco un esempio di "samp"
Indica un esempio. Il testo viene visualizzato a spaziatura fissa.

rafforzamento




Esempio:

Ecco un testo rafforzato
Ecco un testo rafforzato
Evidenzia una parola. Il testo viene reso in grassetto

variabile

Esempio:

Inseriamo i dati nella variabile temporanea temp …
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" è 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.