Page 20 - Guida tascabile HTML5
P. 20
Capitolo 2
Costruire la pagina con gli
elementi di blocco
Dopo la panoramica iniziale sui concetti base del markup HTML e
l’approfondimento sui metadati nella sezione <head> del documento, passiamo ad
analizzare la struttura vera e propria dei contenuti. Saranno descritte anche le
novità introdotte con la specifica HTML5, che ha di fatto recepito esigenze del
web design moderno e pratiche già diffuse per consentire la creazione di
documenti più efficaci dal punto di vista semantico.
Idealmente gli elementi principali (block-level) su cui si basa la struttura del
documento sono box rettangolari che occupano tutta la larghezza della pagina,
disposti in successione uno sotto l’altro. Al loro interno il contenuto andrà a capo
automaticamente quando necessario, riempiendo orizzontalmente la finestra. Questi
blocchi possono essere nidificati per creare un documento ben organizzato.
NOTA Ricordate che stiamo parlando della struttura dei contenuti, non dell’aspetto
attribuito loro dal browser. Con l’utilizzo dei fogli di stile CSS è possibile modificare la
resa grafica del documento, ma tenete sempre presente che la semantica è la base di
un buon markup HTML: preferite in ogni caso, per quanto possibile, tag in grado di
descrivere al meglio ciò che contengono.
Ecco un frammento di markup HTML composto da elementi di blocco:
<main>
<h1>Gli elementi di blocco</h1>
<p>La struttura della pagina deriva dalla sequenza
e dalla nidificazione degli elementi di blocco.</p>
<p>I box sono disposti uno sotto l'altro in successione.<p>
</main>
Come già visto, il browser assegna al tag <h1> un aspetto differente dai paragrafi
successivi, ma osservando con più attenzione notiamo che anche la spaziatura tra
gli elementi è caratterizzata dal markup e dai tag utilizzati. Le Figure 2.1 e 2.2
mostrano la resa del markup nel browser e i box che idealmente circondano gli
elementi.
