03. Struttura di un documento HTML

HTML e lo standard

Quando si parla di HTML e CSS bisogna sempre fare riferimento alle raccomandazioni e agli standard scritti dal W3C, World Wide Web Consortium, il cui sito e le cui direttive rappresentare la “legge”, il faro per chi scrive codice HTML. Rispettare tali direttive è necessario per produrre documenti correttamente interpretabili da qualsiasi browser.

Il sito web del consorzio è consultabile all'indirizzo http://www.w3.org.

Per verificare se un documento HTML rispetta lo standard, si può utilizzare un apposito servizio di check al seguente link https://validator.w3.org/.

E' bene precisare che correntemente la versione di riferimento è la versione 5 ma il linguaggio è in continua evoluzione

Analizziamo ora il seguente documento HTML:

<!DOCTYPE html>

<html lang="it">

<head>

<meta charset="UTF-8">

<title>Titolo della pagina</title> 

</head> 

<body> 

<p>Questo è un paragrafo</p>

</body> 

</html>

Alla riga 1 troviamo il doctype: l'uso di <!DOCTYPE> non è obbligatorio e può essere omesso, ma il W3C ne consiglia l'uso. Questa istruzione è utilizzata per indicare al browser come interpretare il documento che sta leggendo, in questo caso si intende che è il documento è scritto in HTML5.

Va precisato che il <!DOCTYPE> non è un tag HTML e deve essere posizionato all'inizio del documento HTML, prima dei tag <html>.

Nelle righe successive troviamo degli elementi HTML che, tutti insieme, formano il documento.

Gli elementi HTML sono costituiti da tag HTML che racchiudono o delimitano il contenuto all'interno della pagina. Ad esempio, i tag <p> e </p> sono utilizzati per creare un paragrafo di testo.

Un elemento HTML può avere degli attributi che forniscono informazioni aggiuntive o definiscono comportamenti specifici per quell'elemento. Ad esempio, l'attributo lang nell'elemento del tag <html> specifica la lingua del documento. Alcuni attributi sono opzionali e quindi possono essere omessi all'interno del tag, altri, invece, sono obbligatori.

Un elemento HTML è costituito da un tag di apertura, un tag di chiusura (se necessario) e da tutto ciò che essi racchiudono. I tag fanno parte integrante dell'elemento e ne definiscono la strutturato all'interno del documento HTML.

Tuttavia, è importante notare che non tutti gli elementi HTML richiedono un tag di chiusura. Alcuni elementi sono automaticamente chiusi, il che significa che hanno solo un tag di apertura e non un tag di chiusura separato. Ad esempio, l'elemento <meta> utilizzato nel documento precedente per specificare la codifica dei caratteri adottata,  è un elemento costituito dal tag di apertura e un suo attributo ma non è presente un tag di chiusura.

Gli elementi all'interno del documento possono essere innestati, cioè un elemento ne può contenere altri che, a loro volta, possono contenere ancora altri elementi.

Per facilitare l'interpretazione della struttura del documento ad un utente "umano", e quindi non al browser web, si è soliti allineare gli elementi in modo che quelli interni siano più spostati a destra. In questo caso si dice che il documento è indentato.

La pratica di indentare i documenti HTML è usuale ma non è obbligatoria in quanto i browser e gli altri programmi utilizzati per la visualizzazione ignorano l'allineamento degli elementi.

Il tag <html> costituisce la radice del documento. Questo elemento ne contiene altri due che costituiscono le sezioni HEAD e BODY.

Struttura di un documento HTML

Un esempio di documento HTML con più elementi innestati è riportato di seguito. Esso può essere preso a riferimento ma non tutte le sezioni sono obbligatorie.

<!DOCTYPE html>

<html lang="it">

<head>

<!-- Metadati, collegamenti a CSS e altri elementi dell'intestazione -->

<meta charset="UTF-8">

<title>Titolo della pagina</title>

<style>

       /* Regole di stile CSS per la formattazione degli elementi HTML nella pagina */

</style>

</head>

<body>

<!-- Contenuto visibile della pagina web -->


<header>

<!-- Contenuto dell'intestazione -->

</header>

  <main>

     <!-- Contenuto principale -->

  </main>


<nav>

<!-- Contenuto di navigazione principale -->

</nav>


<footer>

<!-- Contenuto del piè di pagina -->

</footer>

</body>

</html>

Notare che alcune istruzioni qui riportate sono in realtà dei commenti e quindi non hanno nessun effetto rispetto alla visualizzazione del documento. 

I commenti in HTML iniziano con <!-- e terminano con -->.  Notare che il tag di apertura è composto da 4 caratteri mentre quello di chiusura da 3 caratteri. Tutto ciò che si trova all'interno di questi delimitatori non verrà interpretato dal browser e verrà ignorato. 

La sezione delimitata da <style> e </style> afferiscono alle regole CSS. In questa sezione i commenti sono delimitati da /* e */.

In linea generale si può dire che:

Elementi ricorrenti

Nella sezione HEAD sono normalmente presenti:

Nella sezione BODY troveremo numerosi elementi come ad esempio: