Impara la struttura fondamentale di un documento HTML. Scopri come organizzare correttamente head, body e tutti gli elementi essenziali per pagine web ben strutturate.
La struttura di un documento HTML è il fondamento su cui si basa ogni pagina web. Comprendere come organizzare correttamente gli elementi HTML non solo garantisce che le tue pagine funzionino correttamente, ma migliora anche l'accessibilità, l'ottimizzazione per i motori di ricerca e la manutenibilità del codice. Questa guida completa ti insegnerà tutto ciò che devi sapere sulla struttura dei documenti HTML.
Ogni documento HTML valido segue una struttura specifica che include elementi obbligatori e opzionali. Ecco la struttura di base:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titolo della Pagina</title>
</head>
<body>
<h1>Contenuto della Pagina</h1>
<p>Questo è il contenuto visibile della pagina.</p>
</body>
</html>
Analizziamo ogni componente in dettaglio.
<!DOCTYPE html>
Il DOCTYPE è la prima riga di ogni documento HTML e serve a:
HTML5 (Attuale):
<!DOCTYPE html>
HTML 4.01 Strict (Obsoleto):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 (Obsoleto):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Il DOCTYPE di HTML5 è molto più semplice e dovrebbe essere utilizzato in tutti i nuovi progetti.
<html lang="it">
<!-- Tutto il contenuto del documento va qui -->
</html>
L'elemento <html> è il contenitore radice che racchiude tutto il contenuto della pagina.
<html lang="it">
<html lang="en">
<html lang="fr">
<html lang="es">
L'attributo lang specifica la lingua principale del documento e:
<html lang="ar" dir="rtl"> <!-- Arabo, da destra a sinistra -->
<html lang="he" dir="rtl"> <!-- Ebraico, da destra a sinistra -->
<html lang="it" dir="ltr"> <!-- Italiano, da sinistra a destra -->
Specifica la direzione del testo:
ltr: Left-to-Right (predefinito)rtl: Right-to-LeftLa sezione <head> contiene metadati sulla pagina che non sono visibili agli utenti ma sono essenziali per browser, motori di ricerca e altri servizi web.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Descrizione della pagina">
<meta name="keywords" content="parole, chiave, separate, da, virgole">
<meta name="author" content="Nome Autore">
<title>Titolo della Pagina</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico">
<script src="script.js"></script>
</head>
<meta charset="UTF-8">
Specifica la codifica dei caratteri del documento:
<head><meta name="viewport" content="width=device-width, initial-scale=1.0">
Controlla come la pagina viene visualizzata sui dispositivi mobili:
width=device-width: Adatta la larghezza al dispositivoinitial-scale=1.0: Zoom iniziale al 100%user-scalable=no: Disabilita lo zoom (sconsigliato per accessibilità)<meta name="description" content="Descrizione concisa e accattivante della pagina che appare nei risultati di ricerca">
<meta name="keywords" content="html, css, javascript, sviluppo web">
Nota: I meta keywords sono largamente ignorati dai motori di ricerca moderni a causa dell'abuso passato.
<meta name="author" content="Mario Rossi">
Specifica l'autore del documento.
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="index, nofollow">
Controlla come i motori di ricerca indicizzano la pagina:
index/noindex: Indicizza o non indicizzare la paginafollow/nofollow: Segui o non seguire i link nella paginaPer una migliore condivisione sui social media:
<meta property="og:title" content="Titolo della Pagina">
<meta property="og:description" content="Descrizione della pagina">
<meta property="og:image" content="https://esempio.com/immagine.jpg">
<meta property="og:url" content="https://esempio.com/pagina">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Nome del Sito">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nomeutente">
<meta name="twitter:title" content="Titolo della Pagina">
<meta name="twitter:description" content="Descrizione della pagina">
<meta name="twitter:image" content="https://esempio.com/immagine.jpg">
<title>Titolo della Pagina - Nome del Sito</title>
Il titolo è cruciale per:
Best practice per i titoli:
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap">
<link rel="icon" href="favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://example.com">
Ottimizzano le prestazioni precaricando connessioni a domini esterni.
<script src="script.js"></script>
<script>
// JavaScript inline
console.log('Pagina caricata');
</script>
Nota: Gli script nel <head> bloccano il rendering. Considera di spostarli prima della chiusura del <body> o utilizzare defer/async.
La sezione <body> contiene tutto il contenuto visibile della pagina web.
<body>
<header>
<nav>Menu di navigazione</nav>
</header>
<main>
<section>
<h1>Titolo Principale</h1>
<p>Contenuto principale della pagina.</p>
</section>
</main>
<aside>
<p>Contenuto laterale o correlato.</p>
</aside>
<footer>
<p>Informazioni di copyright e contatti.</p>
</footer>
</body>
HTML5 ha introdotto elementi semantici che migliorano la struttura e l'accessibilità:
<header>
<h1>Nome del Sito</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">Chi Siamo</a></li>
<li><a href="/contact">Contatti</a></li>
</ul>
</nav>
</header>
Rappresenta l'intestazione di una pagina o sezione.
<nav aria-label="Menu principale">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
<li><a href="/products">Prodotti</a></li>
<li><a href="/services">Servizi</a></li>
<li><a href="/contact">Contatti</a></li>
</ul>
</nav>
Contiene link di navigazione principali.
<main>
<h1>Contenuto Principale</h1>
<p>Il contenuto principale unico di questa pagina.</p>
</main>
Racchiude il contenuto principale della pagina. Deve essere unico per pagina.
<section>
<h2>Sezione di Contenuto</h2>
<p>Contenuto tematicamente correlato.</p>
</section>
Raggruppa contenuto tematicamente correlato.
<article>
<header>
<h2>Titolo dell'Articolo</h2>
<p>Pubblicato il <time datetime="2025-09-03">3 Settembre 2025</time></p>
</header>
<p>Contenuto dell'articolo che può esistere indipendentemente.</p>
</article>
Contenuto indipendente che può essere distribuito separatamente.
<aside>
<h3>Articoli Correlati</h3>
<ul>
<li><a href="/articolo1">Primo Articolo</a></li>
<li><a href="/articolo2">Secondo Articolo</a></li>
</ul>
</aside>
Contenuto correlato ma non essenziale al contenuto principale.
<footer>
<p>© 2025 Nome Azienda. Tutti i diritti riservati.</p>
<nav aria-label="Menu footer">
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Termini di Servizio</a>
</nav>
</footer>
Informazioni di chiusura per la pagina o sezione.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titolo del Post - Nome Blog</title>
<meta name="description" content="Descrizione del post del blog">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Nome del Blog</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/categories">Categorie</a></li>
<li><a href="/about">Chi Sono</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Titolo del Post</h1>
<p>Pubblicato il <time datetime="2025-09-03">3 Settembre 2025</time> da <span>Autore</span></p>
</header>
<div>
<p>Contenuto del post...</p>
</div>
<footer>
<p>Tag: <a href="/tag/html">HTML</a>, <a href="/tag/css">CSS</a></p>
</footer>
</article>
</main>
<aside>
<section>
<h2>Post Recenti</h2>
<ul>
<li><a href="/post1">Post 1</a></li>
<li><a href="/post2">Post 2</a></li>
</ul>
</section>
</aside>
<footer>
<p>© 2025 Nome Blog. Tutti i diritti riservati.</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nome Prodotto - Negozio Online</title>
<meta name="description" content="Descrizione del prodotto">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div>
<h1>Logo Negozio</h1>
<form role="search">
<input type="search" placeholder="Cerca prodotti...">
<button type="submit">Cerca</button>
</form>
<nav>
<a href="/cart">Carrello (0)</a>
<a href="/account">Account</a>
</nav>
</div>
<nav aria-label="Menu principale">
<ul>
<li><a href="/electronics">Elettronica</a></li>
<li><a href="/clothing">Abbigliamento</a></li>
<li><a href="/home">Casa</a></li>
</ul>
</nav>
</header>
<main>
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/electronics">Elettronica</a></li>
<li aria-current="page">Smartphone</li>
</ol>
</nav>
<section>
<h1>Nome Prodotto</h1>
<div>
<img src="prodotto.jpg" alt="Nome Prodotto">
<div>
<p>Descrizione del prodotto...</p>
<p>Prezzo: €299</p>
<button>Aggiungi al Carrello</button>
</div>
</div>
</section>
</main>
<footer>
<section>
<h2>Servizio Clienti</h2>
<ul>
<li><a href="/help">Aiuto</a></li>
<li><a href="/returns">Resi</a></li>
<li><a href="/shipping">Spedizioni</a></li>
</ul>
</section>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mario Rossi - Designer Grafico</title>
<meta name="description" content="Portfolio di Mario Rossi, designer grafico specializzato in branding e web design">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Mario Rossi</h1>
<p>Designer Grafico</p>
<nav>
<ul>
<li><a href="#about">Chi Sono</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contatti</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>Chi Sono</h2>
<p>Descrizione professionale...</p>
</section>
<section id="portfolio">
<h2>I Miei Lavori</h2>
<div>
<article>
<h3>Progetto 1</h3>
<img src="progetto1.jpg" alt="Screenshot Progetto 1">
<p>Descrizione del progetto...</p>
</article>
<article>
<h3>Progetto 2</h3>
<img src="progetto2.jpg" alt="Screenshot Progetto 2">
<p>Descrizione del progetto...</p>
</article>
</div>
</section>
<section id="contact">
<h2>Contattami</h2>
<form>
<label for="name">Nome:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Messaggio:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Invia</button>
</form>
</section>
</main>
<footer>
<p>© 2025 Mario Rossi. Tutti i diritti riservati.</p>
<nav>
<a href="https://linkedin.com/in/mariorossi">LinkedIn</a>
<a href="https://behance.net/mariorossi">Behance</a>
<a href="mailto:mario@esempio.com">Email</a>
</nav>
</footer>
</body>
</html>
<!-- Buono -->
<article>
<header>
<h1>Titolo</h1>
</header>
<section>
<p>Contenuto...</p>
</section>
</article>
<!-- Evita -->
<div class="article">
<div class="header">
<h1>Titolo</h1>
</div>
<div class="content">
<p>Contenuto...</p>
</div>
</div>
<!-- Corretto -->
<h1>Titolo Principale</h1>
<h2>Sottosezione</h2>
<h3>Sotto-sottosezione</h3>
<h2>Altra Sottosezione</h2>
<!-- Scorretto -->
<h1>Titolo Principale</h1>
<h3>Salto di livello</h3>
<h2>Ordine sbagliato</h2>
<!-- Corretto -->
<body>
<header>...</header>
<main>
<h1>Contenuto Principale</h1>
<p>...</p>
</main>
<footer>...</footer>
</body>
<!-- Scorretto -->
<body>
<main>Primo main</main>
<main>Secondo main</main>
</body>
<nav aria-label="Menu principale">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<section aria-labelledby="news-heading">
<h2 id="news-heading">Ultime Notizie</h2>
</section>
<head>
<!-- CSS critici inline per above-the-fold -->
<style>
/* CSS critici */
</style>
<!-- CSS non critici caricati in modo asincrono -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<!-- JavaScript con defer -->
<script src="script.js" defer></script>
</head>
<!-- Usa strumenti come -->
<!-- - axe DevTools -->
<!-- - Lighthouse -->
<!-- - Screen reader testing -->
Testa la tua struttura su:
<!-- Scorretto -->
<html>
<head>...</head>
<!-- Corretto -->
<!DOCTYPE html>
<html>
<head>...</head>
<!-- Scorretto -->
<head>
<title>Titolo</title>
</head>
<!-- Corretto -->
<head>
<meta charset="UTF-8">
<title>Titolo</title>
</head>
<!-- Scorretto -->
<p><div>Contenuto</div></p>
<!-- Corretto -->
<div><p>Contenuto</p></div>
<!-- Scorretto -->
<html>
<!-- Corretto -->
<html lang="it">
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prodotto Rivoluzionario - Acquista Ora</title>
<meta name="description" content="Scopri il prodotto che cambierà la tua vita. Offerta limitata!">
</head>
<body>
<header>
<h1>Prodotto Rivoluzionario</h1>
</header>
<main>
<section>
<h2>Trasforma la Tua Vita Oggi</h2>
<p>Descrizione accattivante...</p>
<button>Acquista Ora</button>
</section>
<section>
<h2>Testimonianze</h2>
<!-- Recensioni clienti -->
</section>
<section>
<h2>Garanzia</h2>
<!-- Informazioni garanzia -->
</section>
</main>
<footer>
<p>Contatti e informazioni legali</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API Documentation - Guida Sviluppatori</title>
<meta name="description" content="Documentazione completa per l'API">
</head>
<body>
<header>
<h1>API Documentation</h1>
<nav>
<ul>
<li><a href="#getting-started">Iniziare</a></li>
<li><a href="#endpoints">Endpoints</a></li>
<li><a href="#examples">Esempi</a></li>
</ul>
</nav>
</header>
<main>
<section id="getting-started">
<h2>Come Iniziare</h2>
<p>Guida introduttiva...</p>
</section>
<section id="endpoints">
<h2>Endpoints API</h2>
<article>
<h3>GET /users</h3>
<p>Recupera lista utenti...</p>
<pre><code>curl -X GET https://api.esempio.com/users</code></pre>
</article>
</section>
</main>
<aside>
<nav aria-label="Indice">
<h2>Indice</h2>
<ul>
<li><a href="#authentication">Autenticazione</a></li>
<li><a href="#rate-limits">Rate Limits</a></li>
<li><a href="#errors">Gestione Errori</a></li>
</ul>
</nav>
</aside>
<footer>
<p>© 2025 API Documentation</p>
</footer>
</body>
</html>
La struttura del documento HTML è il fondamento di ogni pagina web di successo. Una struttura ben organizzata non solo migliora l'esperienza utente, ma facilita anche l'indicizzazione da parte dei motori di ricerca, migliora l'accessibilità e rende il codice più manutenibile.
Ricorda questi punti chiave:
La padronanza della struttura HTML è un investimento che ripaga nel tempo, rendendo i tuoi progetti web più professionali, accessibili e performanti. Continua a praticare con diversi tipi di contenuto e rimani aggiornato sulle evoluzioni degli standard web.
Con una solida comprensione della struttura del documento HTML, hai le basi per creare esperienze web eccezionali che funzionano bene per tutti gli utenti, su tutti i dispositivi e in tutti i contesti.