Prima di approfondire le tematiche legate alla formattazione del testo è bene precisare alcuni concetti che reggono l'uso di questi strumenti.
HTML è un sistema di contrassegno con il compito di definire la struttura e l'aspetto di un documento. Questa definizione che senza altri commenti passerebbe inosservata, va invece approfondita per capire meglio i concetti di tag fisici e logici. Un tag fisico ha il compito di formattare visivamente un documento, cioè di renderlo grassetto, corsivo, sottolineato ecc. La funzione di questi tag non è quella di dare un aspetto al documento, ma di marcare determinati punti per definirne una struttura. Un tag logico, al contrario ha la funzione di definire una struttura indipendentemente dal suo aspetto . Ovvero, indipendentemente dal modo in cui il browser interpreterà visivamente il contrassegno. Per comprendere meglio questa differenza prendiamo in esame due elementi volti a formattare testo:
<ADDRESS></ADDRESS>
Si tratta di un tag logico che contrassegna l'informazione di indirizzo nel documento. In altre parole quando si è in presenza di un indirizzo e-mail, di un numero di telefono o di un indirizzo secondo le regole di HTML va inserito questo tag logico.<I></I>
Si tratta di un tag fisico che rende corsivo (italic) il testo compreso nell'elemento. E' quindi, un tag volto a dare un aspetto al documento e non a marcare un elemento di struttura. Vediamo insieme qual è il risultato visivo di un loro utilizzo all'interno di un documento Web:webmaster@html.it
webmaster@html.it
Senza guardare il source del documento ti sfidiamo a capire quale testo sia stato formattato con ADDRESS e quale con I. Visivamente entrambi i tag (il primo è ADDRESS e il secondo I) danno un medesimo risultato (il testo corsivo), ma da un punto di vista di struttura del documento, solo il primo (ADDRESS) indica che al proprio interno è presente un indirizzo, mentre il secondo non da' alcuna informazione di questo tipo.Formattare titoli da <H1> ad <H6>
Il tag <Hn> (dove n è il numero da 1 a 6 che è possibile assegnare all'elemento) ha la funzione di fornire stili ai titoli di pagina, dando maggiore o minore enfasi a seconda del numero inserito. Come accennato i numeri vanno da 1 a 6, con maggior importanza dei numeri più bassi rispetto agli alti. Visivamente tale diversa importanza si traduce in differente grandezza del testo, come nell'esempio che segue:
Oltre a definire gli stile dei titoli, il tag <Hn> inserisce spaziature di paragrafo rispetto agli elementi che seguono. Questo tag necessita del tag di chiusura.
<Font>
Il tag fisico FONT è uno dei più usati e frequenti nell'attuale Web publishing. Nella sezione: Impostare lo sfondo del documento (elemento BODY) abbiamo visto come l'attributo TEXT dia un colore univoco a tutto il testo del documento. Il tag FONT ha in parte una funzione simile, ma molto più ampia e concettualmente differente.
Il tag FONT ha la funzione di formattare tipo e grandezza del testo limitatamente ad alcuni punti del documento. In realtà se il tag font aprisse e chiudesse il documento, la totalità del testo compreso al suo interno sarebbe formattato di conseguenza. Ma concettualmente il tag FONT è stato pensato per definire parti limitate di testo. Mentre, poi, TEXT determina solo il colore del testo, il tag FONT può definire: tipo di font utilizzato, grandezza e colore.
Segue la sintassi corretta del tag:
<FONT FACE="arial" SIZE=5 COLOR=red>Carattere da formattare</FONT>
L'attributo FACE="arial" indica il tipo di carattere da richiamare per la visualizzazione. SIZE=5 la grandezza del carattere che può andare da 1 a 7 (con maggiore grandezza dei numeri vicini al 7); COLOR=red indica il colore del testo (esprimibile anche in valori esadecimali).
<B>, <I>, <U> sono tre dei più usati tag di formattazione fisica dell'HTML. Tutti vanno aperti e successivamente richiusi:
<B> Testo grassetto </B>
Il testo compreso tra questi tag è trasformato in grassetto (la B sta per BOLD).
<I> Testo corsivo </I>
Il testo compreso tra questi tag è formattato in corsivo (la I sta per ITALIC)
<U> Testo sottolineato </U>
Il testo compreso tra questi tag è sottolineato pur non essendo un link (la U sta per UNDERLINE).
Esiste anche il tag STRIKE per il testo barrato:
<STRIKE> Testo barrato </STRIKE>
| TAG | FUNZIONE |
| <font></font> | Formattare il testo |
| size= | All'interno del tag font definisce la grandezza |
| face= | All'interno del tag font definisce il carattere |
| color= | All'interno del tag font definisce il colore del testo |
| <b></b> | Il testo tra i due tag è formattato in grassetto |
| <i></i> | Il testo tra i due tag è formattato in corsivo |
| <u></u> | Il testo tra i due tag è sottolineato |
| <strike></strike> | Il testo tra i due tag è barrato |