Consulenza - Sviluppo - Marketing - Formazione

Giacomo Rutili

Tieni qualche istante il mouse sopra al mio nome per aggiungermi su Google+ o seguimi sugli altri social
Giacomo Rutili

struttura di un documento HTML

12 giugno 2011, Scritto da , category css

Poiché una delle caratteristiche fondamentali dei CSS è l’ereditarietà, sarà bene aver presente come è costruito un documento HTML.

Una pagina HTML è strutturata in maniera gerarchica, come un albero composto da una radice, rami e foglie.

<head>
<title>Struttura del documento</title>
</head>
<body>
<h1>Titolo</h1>
<div>
<p>Primo <a href="pagina.htm">paragrafo</a></p>
</div>
<p>Secondo<b>paragrafo</b></p>
</body>
</html>

Quanto scritto sopra equivale alla figura seguente:

Struttura di una pagina HTML

struttura ad albero per una pagina HTML

La struttura, come detto, è gerarchica. Ciò implica una relazione tra gli elementi che la compongono. La relazione che si crea è di tipo ramo/foglia o, se preferiamo, genitore/figlio.

Si intende genitore (parent) un elemento che contiene uno o più elementi.
Si intende figlio (child) un elemento che è racchiuso in un altro elemento.

Nell’esempio precedente:

  • <body> è figlio di <html> ma, a sua volta, è anche genitore di <h1>, <div> e <p>
  • <p> è genitore di <b>
  • <b> è figlio di <p> (che non è un’offesa 😀 )
  • <html> è l’unico elemento che non può esser figlio di nessuno ed è l‘elemento radice (root) dell’albero generato. E’ una sorta di Adamo biblico 😉

Comprendere la struttura del documento ha molta importanza per riuscire a scrivere codice pulito sia dal punto di vista sintattico che semantico. Aiuta nella scrittura di codice ottimale e non ridondante (specialmente per la dichiarazione di regole CSS già ereditate da elementi padre) ed è fondamentale per il riferimento di elementi da manipolare tramite javascript.