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>

<head>

<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>

<head>

<title>Titolo della pagina</title>

<style>

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

</style>

</head>

<body>

</header>

<main>

</main>

<nav>

</nav>

</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 . 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:

I tag <html> e </html> delimitano l'intero documento. Da osservare che il tag di apertura <html lang="it"> ha al suo interno anche un attributo per indicare la lingua usata nel documento.
I tag <head> e </head> delimitano la sezione HEAD che contiene informazioni utili al browser, ma che non vengono mostrate a video. Questa sezione deve contenere almeno l'elemento <title>.
I tag <body> e </body> delimitano la sezione BODY che rappresenta la parte del documento che il browser mostrerà a video, ossia il corpo del nostro documento HTML. Qualora il documento sia fortemente strutturato BODY potrà contenere anche le sezioni HEADER, MAIN, NAV, FOOTER ed altre ancora. Tutte queste sezioni sono comunque opzionali.

Elementi ricorrenti

Nella sezione HEAD sono normalmente presenti:

<meta charset="UTF-8">
<title>Titolo della pagina</title> (obbligatorio)

Nella sezione BODY troveremo numerosi elementi come ad esempio:

<p> Testo </p> (la spaziatura ad inizio e fine testo e la spaziatura multipla tra una parola ed un'altra sono ignorate)
<h1> Titolo di livello h1 </h1>

Sito: 7ecnologie

Sezione: 18. HTML & CSS

Capitolo: 03. Struttura di un documento HTML

Indice dei capitoli: 00. Risorse - 01. Ambiente di sviluppo - 02. HTML: introduzione - 03. Struttura di un documento HTML - 04. Tag HTML - 05. CSS: introduzione - 06. Selettori CSS - 07. Regole CSS - 08. Regole CSS speciali - 09. Esempi - 10. Tutorial - 98. Esercizi

Page updated

Google Sites

Report abuse