Page 50 - Guida tascabile HTML5

Come regola generale, valutate l’utilizzo del tag <div> ponendovi alcune

domande relative al contenuto che volete marcare. Ecco alcuni esempi.

È l’intestazione della pagina o dell’articolo? Preferite <header>.
Si tratta di uno strumento di navigazione primario? Preferite <nav>.

È il contenuto principale del documento? Preferite <main>.

È pertinente, ma non necessario per comprendere il contenuto principale?

Preferite <aside>.

Avrebbe senso se distribuito autonomamente? Preferite <article>.
Ha un’intestazione di riferimento? Preferite <section>.

Raccoglie informazioni di servizio e dettagli riferiti al contenuto? Preferite

<footer>.

Se non individuate alcun tag più appropriato, utilizzate <div> per suddividere il
contenuto. Vi renderete conto con la pratica che i casi in cui è necessario ricorrere

a questo tag saranno legati, come già detto, principalmente a esigenze di layout.

Conclusioni

In questo capitolo sono stati illustrati i tag che permettono di organizzare le

informazioni contenute nel documento in modo strutturato: in particolare nella

specifica HTML5 sono stati introdotti alcuni nuovi tag, derivati dalle pratiche
comuni già ampiamente utilizzate nel web design, con il quale la struttura stessa

viene arricchita dal punto di vista semantico.

Tale approccio permette di ottenere un markup molto pulito e lineare, che
garantisce la migliore accessibilità influendo anche sull’indicizzazione del

contenuto da parte dei motori di ricerca.

Come abbiamo visto i tag possono essere combinati in modo molto flessibile,
per adattare il markup alla maggior parte delle situazioni e “vestire” qualsiasi tipo

di contenuto.

NOTA Cercate di abituarvi a ricostruire mentalmente la struttura delle pagine che
visitate, provando a riflettere sul markup ottimale che potrebbe essere alla base del
documento. Questo esercizio può aiutare a prendere confidenza con gli elementi
disponibili, per attribuire a ogni parte del documento il corretto valore semantico.

Nel prossimo capitolo prenderemo familiarità con altri elementi di blocco,

pensati per inserire nella pagina contenuti multimediali: immagini, tracce audio e
video e persino intere pagine HTML nidificate.