InnoMarts logo
InnoMarts
Fast websites
← Back to course

La Struttura del Documento HTML

La Struttura del Documento HTML

Bentornato.

Nella lezione precedente hai creato la tua prima pagina HTML.

Ora rallentiamo e guardiamo la struttura con più attenzione.

Perché HTML non è solo “qualche tag su una pagina”.

Un buon documento HTML ha una struttura chiara.

E se la struttura è sbagliata, il browser proverà comunque ad aiutarti.

Ma affidarsi al browser per sistemare il tuo caos è come chiedere a un cameriere di ricostruire la cucina durante la cena.

Possibile?

Forse.

Buona idea?

No.

Cosa Imparerai

In questa lezione imparerai:

La Struttura HTML di Base

Un documento HTML standard assomiglia a questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La Mia Pagina</title>
</head>
<body>
  <h1>Benvenuto</h1>
  <p>Questa è la mia pagina web.</p>
</body>
</html>

Questa struttura è la base di quasi ogni pagina HTML.

Sembra piccola.

Ma fa un lavoro importante.

Come lo scheletro di una casa.

Non glamour.

Molto necessario.

DOCTYPE

La prima riga è:

<!DOCTYPE html>

Dice al browser:

Questo documento usa HTML moderno.

Più precisamente, dice al browser di usare la modalità standard.

Questo significa che il browser deve mostrare la pagina secondo gli standard moderni del web.

Se lo dimentichi, il browser potrebbe entrare in comportamenti strani di compatibilità.

E nessuno vuole che il browser si comporti come se avesse trovato un vecchio manuale polveroso del 2003.

Quindi tienilo.

Sempre.

L’Elemento html

Dopo DOCTYPE, apriamo l’elemento HTML principale:

<html lang="it">

E lo chiudiamo alla fine:

</html>

Tutto ciò che è nella pagina va dentro questo elemento.

È la radice del documento.

Il grande contenitore.

La valigia digitale.

L’Attributo lang

Questa parte è importante:

lang="it"

Dice ai browser e alle tecnologie assistive quale lingua usa la pagina.

Per inglese:

<html lang="en">

Per italiano:

<html lang="it">

Per polacco:

<html lang="pl">

Per ucraino:

<html lang="uk">

Per russo:

<html lang="ru">

Questo aiuta:

Piccolo attributo.

Grande utilità.

HTML ha molte piccole cose così.

Dettagli minuscoli che evitano dolore futuro in silenzio.

L’Elemento head

L’elemento <head> contiene informazioni sulla pagina.

Esempio:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La Mia Pagina</title>
</head>

Questo contenuto di solito non è visibile direttamente nella pagina.

L’utente non vede <head> come contenuto normale.

Ma il browser lo legge.

Il <head> è come il backstage della pagina web.

Non visibile al pubblico.

Ma molto importante.

Il Tag meta charset

Questa riga è importante:

<meta charset="UTF-8">

Dice al browser quale codifica dei caratteri usare.

Usa UTF-8.

Supporta molte lingue e caratteri speciali.

Senza di essa, il testo a volte può apparire rotto.

Per esempio lettere accentate, caratteri cirillici o simboli possono diventare spaghetti digitali.

Quindi sì:

<meta charset="UTF-8">

Mettilo sempre.

Il tuo futuro sito multilingua ti ringrazierà.

In silenzio.

Ma sinceramente.

Il Meta Tag Viewport

Anche questa riga è importante:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Aiuta la pagina a mostrarsi correttamente su telefoni e tablet.

Senza di essa, i browser mobili possono mostrare la pagina come un sito desktop minuscolo schiacciato in uno schermo piccolo.

Molto scomodo.

Come leggere un giornale attraverso il buco della serratura.

Il tag viewport dice al browser:

Usa la larghezza del dispositivo come larghezza della pagina.

È essenziale per il design responsive.

Anche se sarà CSS a gestire gran parte dello stile, HTML prepara la pagina correttamente.

Prima buona struttura.

Poi bel layout.

L’Elemento title

L’elemento <title> imposta il titolo nella scheda del browser:

<title>La Mia Pagina</title>

Non è la stessa cosa di h1.

Il title appare nella scheda del browser, nei preferiti e nei risultati dei motori di ricerca.

L’h1 appare dentro la pagina.

Esempio:

<title>Chi Sono</title>

E dentro il body:

<h1>Chi Sono</h1>

Possono essere simili.

Ma non sono la stessa cosa.

Uno serve al browser e ai motori di ricerca.

L’altro serve al contenuto della pagina.

L’Elemento body

L’elemento <body> contiene tutto ciò che è visibile nella pagina:

<body>
  <h1>Benvenuto</h1>
  <p>Questa è la mia pagina web.</p>
</body>

Titoli, paragrafi, immagini, link, liste, form — tutto va dentro body.

Se l’utente lo vede, probabilmente appartiene al body.

Il body è dove vive davvero la pagina.

L’head è la sala di pianificazione.

Il body è il palco.

Indentazione

HTML non richiede indentazione perfetta per funzionare.

Questo funziona:

<body><h1>Ciao</h1><p>Testo</p></body>

Ma è brutto.

E più difficile da leggere.

Meglio:

<body>
  <h1>Ciao</h1>
  <p>Testo</p>
</body>

L’indentazione aiuta gli umani a capire la struttura.

I browser possono perdonare HTML disordinato.

Gli umani meno.

Soprattutto il te stesso futuro alle 23:47 che cerca di capire il proprio codice.

Commenti HTML

Puoi scrivere commenti in HTML:

<!-- Questo è un commento -->

I commenti non vengono mostrati nella pagina.

Sono utili per note:

<!-- Titolo principale della pagina -->
<h1>Benvenuto</h1>

Non esagerare con i commenti.

Un buon HTML dovrebbe già essere comprensibile.

I commenti devono spiegare cose utili, non decorare la pagina come coriandoli.

Crea una Pagina Migliore

Apri il file index.html della lezione 1.

Sostituiscilo con questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La Mia Pagina di Pratica HTML</title>
</head>
<body>
  <h1>La Mia Pagina di Pratica HTML</h1>
  <p>Questa pagina ha una struttura HTML pulita.</p>
  <p>Sto imparando come i browser capiscono le pagine web.</p>
</body>
</html>

Salva il file.

Aprilo o aggiornalo nel browser.

La pagina sembra ancora semplice.

Va bene così.

Oggi non decoriamo.

Costruiamo lo scheletro.

Lo scheletro non ha ancora bisogno del cappello.

Errori Comuni

Dimenticare DOCTYPE

Non iniziare direttamente con:

<html>

Usa:

<!DOCTYPE html>
<html lang="it">

Il browser ama la chiarezza.

Mettere Contenuto Visibile in head

Questo è sbagliato:

<head>
  <h1>Ciao</h1>
</head>

Il contenuto visibile va in body:

<body>
  <h1>Ciao</h1>
</body>

head è per le informazioni della pagina.

body è per il contenuto visibile.

Dimenticare il viewport

Senza questo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

la tua pagina può comportarsi male sui dispositivi mobili.

Aggiungilo ora.

Non aspettare che il sito sembri un francobollo sul telefono.

Pratica

Crea un nuovo file:

touch structure.html

Dentro crea un documento HTML completo con:

Esempio:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pratica Struttura</title>
</head>
<body>
  <!-- Titolo principale -->
  <h1>Pratica della Struttura HTML</h1>
  <p>Questa pagina mi aiuta a capire la struttura HTML.</p>
  <p>Una buona struttura rende le pagine più facili da leggere e mantenere.</p>
</body>
</html>

Aprilo nel browser.

Poi cambia il title e aggiorna.

Guarda cambiare la scheda del browser.

Piccola cosa.

Risultato reale.

Mini Sfida

Crea un file chiamato:

profile.html

Costruisci un documento HTML valido per una semplice pagina profilo.

Deve includere:

Niente CSS.

Niente JavaScript.

Solo HTML pulito.

Perché prima di mettere una giacca alla pagina, dobbiamo sistemare bene le ossa.

Riassunto

Oggi hai imparato che:

La struttura HTML può sembrare semplice.

Ma questa struttura semplice è l’inizio di ogni buona pagina web.

Prossima Lezione

Nella prossima lezione lavoreremo con testo, titoli e paragrafi.

Impareremo a organizzare il contenuto così la pagina non sembrerà un mucchio di parole cadute da un balcone.