HTML.itHTML.it


 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

<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 (&quot;ciao&quot;);</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>&quot;Il coraggio, uno non se lo può dare&quot;</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 &quot;samp&quot;</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.

    Torna a inizio pagina