Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Struttura del Documento HTML Spiegata | Fondamenti di Html
Fondamenti di HTML

bookStruttura del Documento HTML Spiegata

Innanzitutto, si analizza la struttura di un documento HTML.

Struttura di un Documento HTML

Ogni documento HTML deve rispettare una struttura coerente. Gli elementi descritti qui costituiscono la base per organizzare i contenuti, definire la struttura della pagina e migliorare l'esperienza utente sul web.

tag html

Il tag <html> è l'elemento radice di un documento HTML. Tutti gli altri elementi saranno scritti al suo interno. Il tag di apertura <html> indica l'inizio del documento HTML, mentre il tag di chiusura </html> ne indica la fine.
Esempio:

<html>
  <!-- Other elements go here -->
</html>

tag head

Il tag <head> contiene meta-informazioni sul documento HTML, come il titolo, la codifica dei caratteri e risorse esterne come fogli di stile e script. Non contiene contenuti direttamente visibili all'utente sulla pagina web.
Esempio:

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Spiegazione:

  • Il tag <title> definisce il titolo di una pagina web. Viene visualizzato nella barra del titolo del browser o nella scheda del browser. Il titolo di una pagina fornisce una breve panoramica del suo contenuto, facilitando agli utenti la comprensione dello scopo della pagina e la navigazione tra più schede in modo più efficiente;
  • <meta charset="UTF-8"> è responsabile della specifica della codifica dei caratteri utilizzata in un documento HTML. Questa codifica determina come i browser web interpretano e visualizzano il testo;
  • Alcuni meta tag comuni includono:
    • <meta name="description" content="Brief description of the page">: Fornisce una descrizione concisa del contenuto della pagina, che può apparire nei risultati dei motori di ricerca;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Specifica parole chiave rilevanti per il contenuto della pagina, aiutando a migliorare l'ottimizzazione per i motori di ricerca (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Definisce le impostazioni del viewport per il design responsivo, garantendo una corretta visualizzazione su diversi dispositivi.

tag body

Il tag <body> contiene il contenuto principale visibile agli utenti su una pagina web. Questo contenuto comprende testo, immagini, collegamenti, moduli e altri elementi con cui gli utenti possono interagire durante la navigazione del sito. In sostanza, il tag <body> contiene ciò che gli utenti vedono e con cui interagiscono quando visitano un sito web.
Esempio:

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Dichiarazione del tipo di documento

La dichiarazione del tipo di documento informa il browser web sulla versione di HTML utilizzata nel documento. Questa dichiarazione garantisce che il browser web visualizzi correttamente il documento seguendo lo standard HTML specificato. Per i documenti HTML5, la dichiarazione doctype è <!DOCTYPE html>.
Esempio:

<!DOCTYPE html>

Struttura risultante

Per concludere, raccogliamo tutti gli elementi che abbiamo esaminato e combiniamoli in un unico documento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

Di seguito, è possibile vedere come appare il documento HTML nel browser web.

Video tutorial

1. Quale tag è l'elemento radice di un documento HTML?

2. Cosa contiene il tag <head>?

3. Cosa definisce il tag <title>?

4. Qual è lo scopo del tag <body>?

question mark

Quale tag è l'elemento radice di un documento HTML?

Select the correct answer

question mark

Cosa contiene il tag <head>?

Select the correct answer

question mark

Cosa definisce il tag <title>?

Select the correct answer

question mark

Qual è lo scopo del tag <body>?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 1

Chieda ad AI

expand

Chieda ad AI

ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

Awesome!

Completion rate improved to 3.13

bookStruttura del Documento HTML Spiegata

Scorri per mostrare il menu

Innanzitutto, si analizza la struttura di un documento HTML.

Struttura di un Documento HTML

Ogni documento HTML deve rispettare una struttura coerente. Gli elementi descritti qui costituiscono la base per organizzare i contenuti, definire la struttura della pagina e migliorare l'esperienza utente sul web.

tag html

Il tag <html> è l'elemento radice di un documento HTML. Tutti gli altri elementi saranno scritti al suo interno. Il tag di apertura <html> indica l'inizio del documento HTML, mentre il tag di chiusura </html> ne indica la fine.
Esempio:

<html>
  <!-- Other elements go here -->
</html>

tag head

Il tag <head> contiene meta-informazioni sul documento HTML, come il titolo, la codifica dei caratteri e risorse esterne come fogli di stile e script. Non contiene contenuti direttamente visibili all'utente sulla pagina web.
Esempio:

<head>
  <title>Title of the Document</title>
  <meta charset="UTF-8" />
  <!-- Other meta tags, links, and scripts go here -->
</head>

Spiegazione:

  • Il tag <title> definisce il titolo di una pagina web. Viene visualizzato nella barra del titolo del browser o nella scheda del browser. Il titolo di una pagina fornisce una breve panoramica del suo contenuto, facilitando agli utenti la comprensione dello scopo della pagina e la navigazione tra più schede in modo più efficiente;
  • <meta charset="UTF-8"> è responsabile della specifica della codifica dei caratteri utilizzata in un documento HTML. Questa codifica determina come i browser web interpretano e visualizzano il testo;
  • Alcuni meta tag comuni includono:
    • <meta name="description" content="Brief description of the page">: Fornisce una descrizione concisa del contenuto della pagina, che può apparire nei risultati dei motori di ricerca;
    • <meta name="keywords" content="keyword1, keyword2, ...">: Specifica parole chiave rilevanti per il contenuto della pagina, aiutando a migliorare l'ottimizzazione per i motori di ricerca (SEO);
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Definisce le impostazioni del viewport per il design responsivo, garantendo una corretta visualizzazione su diversi dispositivi.

tag body

Il tag <body> contiene il contenuto principale visibile agli utenti su una pagina web. Questo contenuto comprende testo, immagini, collegamenti, moduli e altri elementi con cui gli utenti possono interagire durante la navigazione del sito. In sostanza, il tag <body> contiene ciò che gli utenti vedono e con cui interagiscono quando visitano un sito web.
Esempio:

<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph of text.</p>
  <!-- Other content goes here -->
</body>

Dichiarazione del tipo di documento

La dichiarazione del tipo di documento informa il browser web sulla versione di HTML utilizzata nel documento. Questa dichiarazione garantisce che il browser web visualizzi correttamente il documento seguendo lo standard HTML specificato. Per i documenti HTML5, la dichiarazione doctype è <!DOCTYPE html>.
Esempio:

<!DOCTYPE html>

Struttura risultante

Per concludere, raccogliamo tutti gli elementi che abbiamo esaminato e combiniamoli in un unico documento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <meta charset="UTF-8" />
    <!-- Other meta tags, links, and scripts go here -->
  </head>

  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
    <!-- Other content goes here -->
  </body>
</html>

Di seguito, è possibile vedere come appare il documento HTML nel browser web.

Video tutorial

1. Quale tag è l'elemento radice di un documento HTML?

2. Cosa contiene il tag <head>?

3. Cosa definisce il tag <title>?

4. Qual è lo scopo del tag <body>?

question mark

Quale tag è l'elemento radice di un documento HTML?

Select the correct answer

question mark

Cosa contiene il tag <head>?

Select the correct answer

question mark

Cosa definisce il tag <title>?

Select the correct answer

question mark

Qual è lo scopo del tag <body>?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 2. Capitolo 1
some-alt