Update cookies preferences

Struttura di una pagina HTML

PERCORSO: webfract.it ▶ GUIDA/ ▶ strutturaHTML.htm

La struttura di base di una pagina HTML consiste di 4 parti:

  1. la prima riga;
  2. l'elemento <html>, compreso fra i tag <html> e </html> che a sua volta comprende:
    1. la testa, ovvero l'elemento <head>, compreso fra i tag <head> ed </head>;
    2. il corpo, ovvero l'elemento <body>, compreso fra i tag <body> ed </body>.

Partiamo da un esempio nel quale il codice è suddiviso in cornici che delimitano i vari elementi.

Esempio

<!DOCTYPE html> // dichiarazione iniziale

<html lang="it"> //tag iniziale dell'elemento <html>
<head> //tag iniziale dell'elemento <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Nome della pagina</title>
</head> //tag finale dell'elemento <head>
<body> //tag iniziale dell'elemento <body>
<p>Ciao a tutti...</p>
<p>...E buon inizio!</p>
</body> //tag finale dell'elemento <body>
</html> //tag finale dell'elemento <html>

<!DOCTYPE html>

La prima riga, <!DOCTYPE html>, non è un tag HTML ma è un'istruzione al browser riguardo alla versione HTML usata, in questo caso HTML5.0
Questa dichiarazione assicura che il documento venga analizzato allo stesso modo da browser diversi e dunque aiuta a mostrare una pagina web correttamente.
[Per la lista completa delle dichiarazioni Doctype consigliate guarda www.w3.org]

Elemento <HTML>

Detto anche elemento radice, è il contenitore per tutti gli altri elementi HTML, ad esclusione di <!DOCTYPE>
Comunica al browser che la pagina in questione è un documento HTML.

Ci conviene iniziare con il tag <HTML lang="it">: l'attributo lang, opzionale, specifica il linguaggio del contenuto dell'elemento, nel nostro caso it, italiano.
Dichiarare la lingua è importante per i motori di ricerca e per i cosidetti screen reader, applicazioni software che permettono di ascoltare o trasformano in braille il contenuto dello schermo.
[Per la lista completa delle abbreviazioni del linguaggio guarda w3schools.com]

L'elemento <html> contiene due elementi:

  1. la testa, racchiusa fra i tag <HEAD> ed </HEAD>;
  2. Il corpo, racchiuso fra i tag <BODY> e </BODY>.

Elemento <HEAD>

Comprende tutte quelle informazioni che consentono la visualizzazione della pagina, come il titolo, la descrizione della pagina, lo stile, i metadati, i link verso pagine esterne come fogli si stile o script e così via.
I dati inseriti all'interno dell'elemento non vengono visualizzati dall'utente ma servono all'organizzazione del documento.

Ogni pagina dovrebbe contenere almeno gli elementi che abbiamo inserito, di essi e di tutti gli altri parleremo diffusamente in seguito.

Elemento <BODY>

In esso sono inseriti tutti i contenuti visualizzati nel documento, come testo, immagini, moduli, collegamenti e così via.

Prima di proseguire

Dai un'occhiata al primo documento dell'area Fai da te dove abbiamo riportato l'esempio ed è possibile vedere il risultato del codice.

●  ●  ●  ●  ●  ●  ●  ●

Io, la montagna e il giorno che nasce

- foto di Tommaso Bientinesi

Le nostre guide

© www.webfract.it   - Questo sito è di esclusiva proprietà degli autori, Eliana Argenti e Tommaso Bientinesi.
Ne è vietata la riproduzione e la copia senza la preventiva autorizzazione scritta di webfract.it

Approfondimento su termini di utilizzo