Struttura di un tagAbbiamo 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:
CODICE
<TAG attributi>contenuto</TAG>
Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra:
CODICE
<P align="right">testo</P>
dall'esempio è evidente che la struttura di un attributo è: attributo="valore"
Quindi in definita la struttura di un tag sarà:
CODICE
<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:
Ecco un esempio di immagine:
CODICE
<IMG widht="20" height="20" src="miaImmagine.gif" alt="alt">
come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".
Annidamento e indentazioneUna caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo.
Ad esempio:
CODICE
<tag1 attributi>
contenuto 1
<tag2>
contenuto 2
</tag2>
</tag1>
Potremmo quindi avere ad esempio:
CODICE
<P align="right">
testo 1
<P align="left">
testo 2
</P>
</P>
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:
CODICE
<p align="right">testo 1<p align="left"> testo 2 </p></p>
con:
CODICE
<p align="right">
testo 1
<p align="left">
testo 2
</p>
</p>
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!
