# HTML/Formattare il testo

HTML
Copertina Tutti i moduli · Sviluppo
* IntroduzioneHTML/Introduzione
* FondamentiHTML/Fondamenti
* IntestazioneHTML/Intestazione
* Formattare il testoHTML/Formattare il testo
* Organizzare il testoHTML/Organizzare il testo
* LinksHTML/Links
* ImmaginiHTML/Immagini
* TabelleHTML/Tabelle
* SfondoHTML/Sfondo
* MultimediaHTML/Multimedia
* ModuliHTML/Moduli
* FramesHTML/Frames
* EntitàHTML/Entità
* Includere altri linguaggiHTML/Includere altri linguaggi
* VerificatoriHTML/Verificatori
* Evoluzione del markupHTML/Evoluzione del markup
* EserciziHTML/Esercizi
Modifica il sommario
In questo capitolo vedremo i tag disponibili per formattare il testo, impostandone carattere, colore, dimensioni, ed eventualmente impostare grassetti o corsivi.

## Il tag <font>

Il principale tag HTML per la formattazione del testo è il tag <font> che permette di definire diversi aspetti della visualizzazione del testo, quali il carattere da utilizzare, la dimensione e il colore.
Ad eccezione dei tag di stile, l'insieme dei tag che stiamo per esaminare è stata sostituita dall'uso dei fogli di stile che consentono di scrivere una mole di codice decisamente inferiore e hanno molte altre caratteristiche che li fanno preferire all'uso di questi tag. Se è realmente necessario mantenere una totale compatibilità verso i browser più vecchi (quali Explorer 3, Netscape 4.7 etc.) che praticamente non supportavano i fogli di stile se non in maniera molto approssimata, occorre però continuare ad usare i tag ed i loro attributi. Oramai comunque questi browser non sono più utilizzati, la maggioranza degli utenti utilizza Internet Explorer 6+ oppure Firefox.

### Carattere

È possibile scegliere l'aspetto che assumerà il testo (quale font utilizzerà) attraverso l'attributo face del tag <font>, i cui valori sono tutti i nomi di font esistenti. Per definire face è sufficiente specificare come valore il nome di un carattere (come potrebbe essere Arial, Verdana, Helvetica o Times); è però possibile anche specificare più font, separandoli con una virgola: se il primo font non è installato sul pc dell'utente, verrà usato il secondo, e così via; per questo, alla fine della lista di font è sempre preferibile scegliere anche una famiglia generica di font (ogni font appartiene a una famiglia) in maniera tale da garantire la massima compatibilità con tutta l'utenza:
| Famiglia di font | Caratteristiche | Esempi di font |
| serif | Sono proporzionati e hanno le grazie | Times, Georgia |
| sans-serif | Sono proporzionati e non hanno le grazie | Helvetica, Geneva, Verdana, Arial |
| monospace | Non sono proporzionati, con o senza grazie | Courier, Courier New |
| cursive | Hanno le grazie | Vivaldi, Comic Sans |
| fantasy | Non sono classificabili | Woodblock |

### Colore

Il colore si può impostare attraverso l'attributo color i cui valori possono essere tutti i colori disponibili sia in forma nominale che in forma esadecimale.
Esempio:
In riguardo ai problemi di compatibilità, ricordiamo che:
* i nomi nominali di colori sono preferibili, almeno fintanto che si usano i 16 colori definiti dal W3C (qui l'elenco completo)
* usando la notazione esadecimale usando 6 cifre (ad esempio "#ABCDEF") si rischia di definire colori non visualizzabili da utenti che usano una profondità di colori non elevata. Per essere definire un colore più accessibile, si può usare la notazione a 3 cifre: "#F4C" equivale a #FF44CC.

### Dimensioni

Le dimensioni sono determinate, su una scala arbitraria, dal valore dell'attributo size, che può essere compreso tra 1 e 7. Il valore predefinito è 3. Qualora si inserisse un valore minore di uno o maggiore di sette, verranno interpretati dal browser come dimensione 1 o 7.
È possibile anche determinare una dimensione base del font attraverso il tag <basefont> e il suo attributo size e lo si può ingrandire come si desidera semplicemente inserendo gli operatori + e - seguiti dal valore per cui si desidera incrementare o decrementare la dimensione base. Se non viene determinato il valore base di basefont size="valore" è di 3.
Ecco un esempio:
Ecco un esempio con basefont:
Ecco un altro esempio senza il tag basefont che quindi assumerà valore 3:

## Stile

Nell'HTML vi sono due stili utilizzabili per determinare il modo in cui sarà visualizzato il testo:
* Stile fisico: non si preoccupa della funzione che ha il testo all'interno del contesto pagina e si limita a definire solo gli attributi del testo
* Stile logico: gli stili logici al contrario si preoccupano anche di veicolare all'interprete la funzione del blocco di testo che è presente al loro interno.
Gli stili logici sono quelli maggiormente supportati anche dai vecchi browser in quanto presenti sin dalle prime versioni dell'HTML.
Da un punto di vista concettuale è grandemente preferibile usare gli stili logici, specialmente in vista di un utilizzo esteso dei fogli di stile.
Ad esempio, marcando col il tag <code> una porzione di testo che racchiude del codice sorgente, tale testo sarà normalmente visualizzato con caratteri non-proporzionali. Se in un secondo tempo si desidera che tutti i testi marcati <code> siano visualizzati diversamente (per esempio, su uno sfondo colorato e delimitato da un bordo), sarà sufficiente ridefinire il tag <code> in un foglio di stile, con gli attributi necessari. Per fare un altro esempio, il tag <cite> graficamente ha lo stesso effetto di <en> o <i>, ma definisce logicamente una citazione, e quindi vale il discorso fatto prima per <code>.
Ci sono diversi valori per impostare lo stile di un testo, di seguito una tabella riassuntiva.
| Stile logico | Stile fisico | Effetto |
| <strong> | <b> (bold) | <b> rende il testo in grassetto; <strong> è usualmente (ma non sempre) visualizzato in grassetto |
| <em> (emphasis) | <i> (italic) | Rende il testo in corsivo |
| - | <u> (underline) | Rende il testo sottolineato (è sconsigliato usare il sottolineato in una pagina web, quindi non esiste uno stile logico corrispondente) |
| <code> | <tt> | Rende il testo monospaziato |
| <pre> | <tt> | Indica che il testo contenuto in questo tag è una o più linee di codice. Il testo viene monospaziato |
| <kbd> (keyboard) | <tt> | Rende il testo monospaziato come <code> |
| <abbr> (abbreviation) | | Indica che il testo contenuto in questo tag è un'abbreviazione (nessun effetto di rendering) |
| - | <strike> | Visualizza una porzione di testo barrato |
| - | <sup>(superscript) | Visualizza una porzione di testo in apice |
| - | <sub>(subscript) | Visualizza una porzione di testo in pedice |
| <acronym> | - | Indica che il testo contenuto in questo tag è un acronimo (nessun effetto di rendering) |
| <address> | <i> | Indica che il testo contenuto in questo tag è un indirizzo fisico o e-mail. Il testo viene visualizzato in conrsivo |
| <blockquote> | - | Indica che il testo contenuto in questo tag è una citazione. Il testo viene rientrato verso destra |
| <cite> | <i> | Indica che il testo contenuto in questo tag è una citazione. Il testo viene visualizzato in corsivo |
| <dfn>(definition) | <i> | Indica che il testo contenuto in questo tag è una definizione. Il testo viene visualizzato in corsivo. |
| <q>(quote) | - | Indica che il testo contenuto in questo tag è una citazione all'interno di un testo (nessun rendering del testo) |
| <samp>(sample) | - | Indica che il testo contenuto in questo tag è un esempio (nessun rendering del testo) |
| <var>(variable) | <i> | Indica che il testo contenuto in questo tag è una variabile. Il testo viene visualizzato in corsivo |

## Note

* ↑ gli stili logici sul sito del W3C