Anatomia di un Documento HTML5: La Struttura Fondamentale del Web

Scopri le fondamenta di ogni pagina web: l'anatomia di un documento HTML5, dalle dichiarazioni DOCTYPE agli elementi essenziali come head e body.

Lezione 2: Anatomia di un Documento HTML5

Benvenuti alla seconda lezione del nostro corso "Impara HTML in 45 lezioni". Dopo aver compreso cosa sia l'HTML, oggi ci immergeremo nell'anatomia di un documento HTML5. Capire questa struttura è fondamentale per costruire qualsiasi pagina web.

La Dichiarazione DOCTYPE

Ogni documento HTML valido deve iniziare con una dichiarazione <!DOCTYPE html>. Questa non è una tag HTML, ma un'istruzione per il browser che indica la versione di HTML utilizzata. Per HTML5, questa dichiarazione è semplice e universale.

<!DOCTYPE html>

L'Elemento <html>

Subito dopo il DOCTYPE, troviamo l'elemento radice di ogni pagina HTML: l'elemento <html>. Questo tag racchiude tutto il contenuto della pagina e può avere un attributo lang per specificare la lingua principale del documento.

<!DOCTYPE html>
<html lang="it">
  <!-- Contenuto della pagina qui -->
</html>

La Sezione <head>

All'interno dell'elemento <html>, la prima sezione importante è <head>. Questa sezione contiene meta-informazioni sul documento, che non vengono visualizzate direttamente sulla pagina web, ma sono cruciali per il browser e per i motori di ricerca.

Elementi comuni all'interno di <head> includono:

  • <meta charset="UTF-8">: Specifica la codifica dei caratteri del documento, essenziale per visualizzare correttamente lettere accentate e simboli speciali.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Fondamentale per il responsive design, indica al browser come controllare le dimensioni e la scala della pagina sui diversi dispositivi.
  • <title>: Definisce il titolo della pagina, che appare nella barra del titolo del browser o nella scheda della pagina.
  • <link>: Utilizzato per collegare fogli di stile CSS esterni.
  • <script>: Utilizzato per includere script JavaScript.
<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La Mia Prima Pagina Web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Contenuto visibile qui -->
</body>
</html>

La Sezione <body>

La sezione <body> contiene tutto il contenuto visibile della pagina web: testi, immagini, link, tabelle, moduli e qualsiasi altro elemento che l'utente vedrà e con cui interagirà.

È qui che costruiremo la struttura e il contenuto delle nostre pagine utilizzando i vari tag HTML.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>La Mia Prima Pagina Web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Benvenuti nel mio sito!</h1>
  <p>Questa è la mia prima pagina creata con HTML5.</p>
</body>
</html>

Riepilogo della Struttura Base

In sintesi, un documento HTML5 ha questa struttura fondamentale:

  1. <!DOCTYPE html>: Dichiarazione del tipo di documento.
  2. <html>: Elemento radice che racchiude tutto.
  3. <head>: Contiene meta-informazioni non visibili.
  4. <body>: Contiene il contenuto visibile della pagina.

Comprendere questa architettura è il primo passo per diventare abili nello sviluppo web. Nelle prossime lezioni, esploreremo in dettaglio gli elementi che possiamo inserire all'interno di queste sezioni.

Prossimo argomento: Elementi di testo e paragrafi in HTML5.