Per iniziare prendiamo uno dei template per le pagine HTML più utilizzati, HTML5 Boilerplate, e vediamo come risulta una pagina vuota HTML (semplificata per i nostri scopi):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Metti il titolo qui</title>
<meta name="description" content="Qui inserisci la description">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>La prima riga rappresenta il DOCTYPE, di cui abbiamo parlato, ed è l'unico marcatore, o tag, che ha una sua sintassi particolare (notare infatti che inizia con <!).
Possiamo scegliere diversi tipi di doctype, a seconda del tipo di html che vogliamo usare. Per non sbagliare usiamo l'HTML5, che è quello più recente e al tempo stesso meno rigido.
Il tag <html> rappresenta l'inizio del nostro documento HTML e termina con il tag </html>.
Tutti i tag (tranne quelli "vuoti" che vedremo dopo) comprendono porzioni di testo o altri tag, e la loro chiusura si determina proprio tramite il simbolo </nomedeltag>.
Parti fondamentali del documento HTML sono i tag <head> e <body>. In head sono contenute tutte quelle informazioni a noi invisibili, che servono al browser o ai motori di ricerca. Nel body è invece presente tutto quanto noi visualizzeremo nella pagina html.
Tag contenuti nell'head
1. I meta tag
<meta charset="utf-8">Si tratta di un tag "autoconclusivo": non contiene cioè informazioni fra la sua apertura e chiusura, poiché la seconda in effetti non c'è, ma può presentare dei suoi attributi che permettono di aggiungere alcune informazioni.
Il tag <meta> a seconda del tipo può infatti aggiungere diverse definizioni al documento html. In questo caso questo tag dà delle indicazioni sul tipo di codifica del carattere usato.
Si potrebbe infatti verificare di dover fare siti in altre lingue diverse da quelle occidentali o che richiedano particolari caratteri come quelli matematici, per i quali è richiesta una diversa codifica.
Per ora ci basti sapere che questo tag è utile metterlo così come vedete.
Altri meta tag molto usati sono quelli per aggiungere una descrizione (description) della pagina e le keywords (parole chiave) necessarie ai motori di ricerca affinché il sito venga correttamente indicizzato (inserito negli indici che costituiscono il database di un motore).
2. Il title
Altro tag praticamente obbligatorio nell'head è il title, che definisce la scritta che comparirà sulla barra di navigazione del vostro browser. È preferibile usare, oltre al titolo del sito, anche il nome della pagina che si sta navigando rispetto al sito, per maggiore chiarezza.
<title>Metti il titolo qui</title>Anche questo elemento è fondamentale per l'indicizzazione delle pagine sui motori di ricerca. Intatti nella pagina dei risultati delle ricerche, ciò che vedete come titolo del sito non è altro che il title di cui abbiamo appena parlato, mentre la sua descrizione coincide con il meta tag "description" sopra menzionato.
In mancanza di quest'ultimo il motore indicizza il sito con le prime parole incontrate nel testo della homepage del sito.
3. Il file CSS esterno
Un tag che sarà fondamentale in seguito, è quello che richiama il file css (che definisce cioè la grafica del sito) e che obbliga il browser ad interpretare insieme alla pagina HTML.
Ecco la sintassi:
<link href="style.css" rel="stylesheet" type="text/css" />dove href sta per Hypertext-Reference (riferimento ipertestuale) e verrà usato vedremo anche per creare i link all'interno di una pagina.
Note generiche sui tag: per una questione di ordine (in XHTML sarebbe obbligatorio) i tag si devono aprire e chiudere in modo semanticamente corretto. Non possono cioè "chiudersi" dei tag che siano stati aperti all'interno di un altro tag.
Ecco un esempio di taggatura corretta:
<body>
<schedacliente>
<nome>testo nome</nome>
<cognome>testo cognome</cognome>
<indirizzo>testo indirizzo</indirizzo>
</schedacliente>
</body>Ecco un esempio di markup errato, che può condurre a problemi di visualizzazione:
<body>
<schedacliente>
<nome>testo nome</nome>
<cognome>testo cognome</cognome>
<indirizzo>testo indirizzo
</schedacliente>
</indirizzo>
</body>Per facilitare la lettura del codice HTML si consiglia sempre di "indentarne" la scrittura (lasciare cioè uno spazio iniziale, magari con il tasto tab), quando un tag sia "annidato" all'interno di un altro, come in questo caso i tag nome, cognome, indirizzo rispetto al tag che li contiene "schedacliente".
Nota: non esistono tag con un nome formato da due parole staccate, con caratteri speciali, numeri o punteggiatura. I tag schedacliente, nome, cognome e indirizzo, non esistono in HTML e sono funzionali solo alla comprensione dell'esempio.