Struttura di una pagina HTML

calendargiovedì 17 febbraio 2022 · 2 min di lettura · html  ·
Condividi: linkedincopy

Questo è il post #6 di 31 nella serie “HTML 101 - Le basi”

I componenti essenziali della struttura di una pagina HTML sono quattro e sono la struttura portante di qualunque documento HTML valido.

I quattro componenti sono:

  • Una dichiarazione DOCTYPE (il cui scopo è d’informare il browser riguardo la versione di HTML utilizzato) e deve essere la prima linea del documento.
  • Un tag html di apertura. Tutti gli altri tags della pagina saranno inseriti fra il tag html di apertura e di chiusura.
  • Tag di apertura e chiusura head
  • Tag di apertura e chiusura body
  • Il tag di chiusura html completa il documento. Niente dovrebbe esserci nel documento dopo questo tag.

A parte il DOCTYPE, i restanti tre tags definiscono lo scheletro di un documento HTML nel seguente modo:

  • Il tag html segna l’apertura e chiusura del documento. Ogni altro tag (a parte il DOCTYPE) va inserito all’interno di questi tags.
  • L’elemento head è dove le informazioni riguardanti la pagina vanno inserite. Nella maggior parte dei casi, nessuna di queste informazioni sarà visualizzata all’interno del browser.
  • L’elemento body è dove va inserito tutto il contenuto della pagina HTML. Se abbiamo del testo all’interno di questi due tags, in quasi la totalità dei casi sarà visualizzato dal browser.

Un altro elemento importante di una pagina HTML è il tag title che va inserito all’interno del tag head e definisce il testo che sarà visualizzato nella tab del browser.

Vediamo come è fatta la struttura completa di una semplice pagina HTML con tutti e quattro gli elementi descritti sopra:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagina di prova</title>
  </head>
  <body>
    <div>Qui abbiamo del contenuto</div>
    <div>Qui abbiamo altro contenuto</div>
  </body>
</html>