Struttura di un tag
Abbiamo detto che all'interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (<tag>), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </tag>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:
<tag attributi>contenuto</tag>
Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra:
testo
dall'esempio è evidente che la struttura di un attributo è: attributo="valore"
Quindi in definita la struttura di un tag sarà:
<tag attributo_1="valore1" attributo_2="valore2">contenuto</tag>
Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque:
<tag attributi>
Ecco un esempio di immagine:
come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".
Annidamento e indentazione
Una caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo.
Ad esempio:
<tag1 attributi>
contenuto 1
<tag2>
contenuto 2
</tag2>
</tag1>
Potremmo quindi avere ad esempio:
testo 1
testo 2
L'annidamento ci permette quindi di attribuire formattazioni successive al testo che stiamo inserendo.
Come si può vedere già nell'esempio, è una buona norma utilizzare dei caratteri di tabulazione (il tasto tab a sinistra della lettera Q) per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento.
In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: non si tratta soltanto di un fattore visivo, ma l'allineamento di apertura e chiusura tag viene mantenuto anche se scorriamo in verticale il documento con il cursore.
Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile. Si confronti ad esempio:
testo 1
testo 2
con:
testo 1
testo 2
per il browser i due esempi sono equivalenti, ma per l'utente umano è evidente che la differenza è notevole: pensate ad una pagina complessa visualizzata in un unico blocco di testo: sarebbe del tutto illeggibile!
