Nulla ci vieta di scrivere direttamente all'interno del tag body, come già abbiamo visto negli esempi precedenti, senza utilizzare nessun tag.

A dire la verità, risulta più pratico racchiudere il testo in appositi tag a seconda della funzione che il testo sta svolgendo. La nostra pagina risulterà più semplice da leggere, quando dovremo modificarla, e inoltre potremo ottenere la formattazione che desideriamo.

Come abbiamo detto dall'inzio, i tag sono infatti dei marcatori che ci permettono di mantenere ordine nella pagina e ottenere il layout che desideriamo.

Vediamo i principali tag-contenitori da utilizzare per "racchiudere" il testo.

I titoli: h1, h2, ..., h6
I tag h1, h2 ... h6

titolo 1

titolo 2

titolo 3

titolo 4

titolo 5

titolo 6

La "h" sta per "heading", cioè titolo e le grandezze previste sono sei. Dall'<h1>, che è il più importante, si va via via degradando fino all'

. Il tag <hx> (sia esso h1 o h6) risulta formattato in grassetto e lascia una riga vuota prima e dopo di sé.

Si tratta di un elemento di blocco (cfr. lezioni precedenti). Eccone un esempio.

Il paragrafo

Il paragrafo è l'unità di base entro cui suddividere un testo. Il tag <p> lascia una riga vuota prima della sua apertura e dopo la sua chiusura.

Esempio: due paragrafi

<p>paragrafo 1

paragrafo 2

Ecco come viene visualizzato l'esempio.

Il

Il blocco di testo va a capo, ma - a differenza del paragrafo - non lascia spazi prima e dopo la sua apertura.
Esempio: due <div>

<div>Blocco di testo 1

Blocco di testo 2

Si tratta dell'elemento di tipo block per eccellenza. Ecco come viene visualizzato l'esempio.

Lo
Lo <span> è un contenitore generico che può essere annidato (ad esempio) all'interno dei <div>. Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.

Esempio: due <span>

<span>contenitore 1contenitore 2
Lo <span> è un elemento molto utilizzato soprattutto insieme ai fogli di stile, ad esempio per definire delle aree di testo particolari. Se non viene associato ad uno stile risulta praticamente invisibile, come si vede nell'esempio.

Montare gli elementi insieme
Le caratteristiche più evidenti di <p>, <div> e <span> sono quindi:

<p> lascia spazio prima e dopo la propria chiusura
<div> non lascia spazio prima e dopo la propria chiusura, ma - essendo un elemento di blocco - va a capo
<span> - essendo un elemento inline - non va a capo
Un esempio dovrebbe chiarire il tutto.

Per quel che riguarda i tag heading (<h1>, …,

) è da notare che la grandezza del carattere varia a seconda delle impostazioni che l'utente ha sul proprio browser.

Con Internet Explorer, ad esempio, basta andare in Visualizza > Carattere per vedere il titolo crescere o decrescere.

Allineare il testo
I "tag-contenitori" che abbiamo appena visto (e molti altri) permettono di allineare il testo utilizzando semplicemente l'attributo align.

Se avete seguito finora la presente guida, avrete anche indovinato che l'attributo align è disapprovato dal W3C, dal momento che per allineare il testo bisognerebbe invece utilizzare i fogli di stile.

In ogni caso, vediamo cosa ci è concesso fare per l'allineamento con HTML 4: consideriamo il testo di un paragrafo:

Allineamento Sintassi Visualizzazione codice HTML
Testo allineato a sinistra

testo

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

Testo allineato a destra

testo

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

Testo giustificato

testo

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


Andare a capo
Nell'andare a capo si può commettere l'errore, per fortuna sempre meno diffuso, di lasciare paragrafi vuoti o aperti. Ad esempio:

<p>
<p>
<p>
Quando per andare a capo all'interno di un paragrafo possiamo utilizzare il tag
("break", cioè "interruzione di riga").

Se per andare a capo è sufficiente un
, per saltare una riga ne occorrono due:



Un altro valido tag per suddividere la pagina in più parti è il tag

---

("horizontal rule"), che serve per tracciare una linea orizzontale. Eccone un esempio:


--------------------------------------------------------------------------------

Questo tag ha anche alcuni attributi (deprecati, perché la formattazione andrebbe fatta con i CSS):

L'attributo noshade evita di sfumare la linea, size indica l'altezza in pixel, width è la larghezza in pixel o in percentuale, align l'allineamento. Con Internet Explorer si riesce persino a impostare il colore:

---