Struttura del documento: DOCTYPE, html, head, body
Scriva da zero un documento HTML5 valido: la dichiarazione DOCTYPE, l’elemento radice html, head per i metadati e body per il contenuto.
Struttura del documento: DOCTYPE, html, head, body è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Ogni documento HTML ha la stessa struttura di base
Un documento HTML5 valido inizia sempre con una dichiarazione DOCTYPE, contiene un elemento html radice e, al suo interno, una sezione head per i metadati e una sezione body per il contenuto visibile. Comprendere questa struttura è il primo passo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>La dichiarazione DOCTYPE
<!DOCTYPE html> non è un tag HTML: è un'istruzione per il browser che gli indica di visualizzare la pagina in modalità standard. Senza di essa, i browser passano alla "modalità quirks", che visualizza le pagine in modo incoerente. Inserisca sempre questa dichiarazione alla riga 1.
L'elemento <html> e l'attributo lang
L'elemento <html> è la radice del documento. Aggiunga un attributo lang per dichiarare la lingua della pagina. I lettori di schermo lo usano per scegliere il motore di pronuncia corretto e i motori di ricerca per ottenere risultati localizzati.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">L'elemento <head>
<head> contiene metadati: informazioni sulla pagina, non sul contenuto della pagina stessa. Nulla all'interno di head è direttamente visibile agli utenti, ma influisce sul modo in cui il browser e i motori di ricerca trattano la pagina.
Meta tag charset e viewport
<meta charset="UTF-8"> indica al browser di decodificare il file come UTF-8, supportando tutti i caratteri internazionali. <meta name="viewport"> rende possibile il responsive design sui dispositivi mobili.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">L'elemento <title>
Il testo di <title> appare nella scheda del browser, nei segnalibri e nei risultati dei motori di ricerca. Lo mantenga conciso (50–60 caratteri), descrittivo e includa il nome del marchio alla fine.
<title>Getting Started with HTML | CoddyKit</title>Collegare CSS e font
Colleghi i fogli di stile esterni con <link> all'interno di head. Utilizzi rel="stylesheet" e il valore corretto per href. Google Fonts e altri servizi di font vengono collegati allo stesso modo.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">L'elemento <body>
Tutto ciò che è visibile nella pagina si trova all'interno di <body>: intestazioni, paragrafi, immagini, pulsanti, moduli e script. Il body è ciò che l'utente vede e con cui interagisce.
Tag script: dove inserirli
Inserisca <script src="app.js" defer></script> in <head>. L'attributo defer scarica lo script in parallelo e lo esegue dopo che l'HTML è stato analizzato completamente: è la scelta predefinita più sicura.
<head>
<script src="app.js" defer></script>
</head>Commenti in HTML
Utilizzi <!-- comment --> per aggiungere note al proprio HTML. I commenti non vengono visualizzati dagli utenti, ma sono visibili nella visualizzazione del codice sorgente. Li utilizzi per spiegare l'intento, delimitare le sezioni o disattivare temporaneamente il codice durante il debugging.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Validazione: il validatore W3C
Incolli il proprio HTML in validator.w3.org per verificare la presenza di errori. Un HTML valido riduce le incoerenze tra browser, aiuta i lettori di schermo a interpretare correttamente la pagina ed è indice di professionalità.
Verifica rapida
Dove deve essere inserito il tag <meta charset="UTF-8">?
Riepilogo: la struttura del documento HTML
Ogni file HTML richiede: → →
(charset, viewport, title, collegamenti CSS) → (tutto il contenuto visibile). Questa struttura garantisce coerenza tra browser, accessibilità e una corretta indicizzazione SEO.Domande Frequenti
La lezione «Struttura del documento: DOCTYPE, html, head, body» è gratuita?
Sì — il testo completo di «Struttura del documento: DOCTYPE, html, head, body» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Struttura del documento: DOCTYPE, html, head, body»?
Scriva da zero un documento HTML5 valido: la dichiarazione DOCTYPE, l’elemento radice html, head per i metadati e body per il contenuto. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Struttura del documento: DOCTYPE, html, head, body»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Struttura del documento: DOCTYPE, html, head, body
- Tag semantici: header, nav, main, article, footer
- Testo, immagini, link ed elenchi
- Form: input, label, button