Struttura base di una pagina HTML5

Obiettivo della lezione

Creare lo scheletro corretto di una pagina HTML con doctype, head, body, title e meta viewport.

Spiegazione

Ogni pagina HTML dovrebbe partire da una struttura minima. Il doctype comunica al browser che stiamo usando HTML moderno. Il blocco head contiene informazioni sulla pagina, mentre il blocco body contiene ciò che l’utente vede.

La struttura base è il primo controllo da fare quando una pagina non viene visualizzata correttamente.

Idea chiave: in HTML devi scegliere il tag in base al significato del contenuto. La grafica verrà gestita in seguito con CSS.

Codice di esempio

Studia il blocco seguente e prova a copiarlo in un file HTML, modificando testi e contenuti.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>La mia prima pagina</title>
</head>
<body>
  <h1>Benvenuto</h1>
  <p>Questa è una pagina HTML5.</p>
</body>
</html>

Errori comuni

Dimenticare il meta charset e vedere caratteri accentati strani.
Mettere contenuti visibili dentro head.
Non inserire il meta viewport, causando problemi su smartphone.

Esercizio pratico

Crea una nuova pagina partendo dalla struttura base. Applica l’argomento di questa lezione a un contenuto reale: una pagina corso, una scheda personale o una piccola pagina informativa.

Apri il tuo editor.
Crea o aggiorna un file .html o .asp.
Inserisci il codice della lezione.
Modifica testi e attributi.
Apri la pagina nel browser e controlla il risultato.

Lezioni collegate

Continua il laboratorio

Procedi con la lezione successiva oppure passa agli esercizi per consolidare subito i concetti.

Precedente Successiva