Una pagina (X)HTML, per iniziare, non è altro che un insieme di box disposti sullo schermo di un monitor. Non tutti i box sono uguali. Gli elementi blocco sono i box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento. Gli elementi inline non possono contenere elementi blocco, ma solo altri elementi inline (oltre che, ovviamente, il loro stesso tipo di contenuto, essenzialmente testo). Come si può notare, quando sono inseriti nel documento non danno origine ad una nuova riga.
Un altro concetto è quello della struttura ad albero di un documento. Il
meccanismo fondamentale dei CSS è infatti l'ereditarietà. Esso fa sì; che
molte proprietà; impostate per un elemento siano automaticamente ereditate
dai suoi discendenti.
Presentiamo subito un frammento di codice HTML:
In un documento quindi tutti gli elementi hanno tra di loro una relazione del tipo genitore-figlio. Ogni elemento è genitore e/o figlio di un altro.
Un elemento si dice genitore (parent) quando contiene altri elementi. Si dice figlio (child) quando è racchiuso in un altro elemento.
BODY, ad esempio è figlio di HTML, ma è anche genitore di H1, DIV e P. Quest'ultimo è a sua volta genitore di un elemento B.
Osservando attentamente, poichè l'albero genealogico tende ad allungarsi, possiamo dire che HEAD è figlio di HTML, che A è figlio di P, etc. Tra DIV e A, invece si scende di due livelli: diciamo allora che DIV è un antenato di A e che questo è rispetto al primo un discendente.
C'è un solo elemento che racchiude tutti e non è racchiuso: HTML. Continuando con la metafora familiare potremmo dire che è il capostipite, ma in termini tecnici si dice che esso è l'elemento radice (ingl: root). E qui spazziamo il campo da un possibile fraintendimento: l'elemento radice di un documento (X)HTML non è BODY.