Page 39 - Guida tascabile HTML5
P. 39
I contenuti pertinenti: <aside>
È prassi utile e diffusa includere nella struttura della pagina un’area dedicata a
contenuti di contorno: archivi, rimandi ad altri articoli, approfondimenti, inserzioni
pubblicitarie, menu o altri strumenti di navigazione secondari. Sono tutte
informazioni pertinenti e collegate con l’ambito specifico del sito web, ma sono
concettualmente non centrali: spesso (ma non necessariamente) queste informazioni
sono organizzate nella pagina in una barra laterale, visivamente distinta dall’area
dedicata al contenuto principale.
Il tag HTML5 utilizzato per raccogliere questa sezione della pagina è <aside>
(termine inglese traducibile con digressione): è un elemento di blocco all’interno
del quale è possibile strutturare le informazioni utilizzando titoli, liste e
suddivisioni secondarie.
<main>
<article>
<h1>Articolo principale</h1>
<p>Qui trova spazio il contenuto principale</p>
</article>
</main>
<aside>
<h1>Contenuti correlati</h1>
<p>Qui trovano spazio nella pagina i contenuti secondari.</p>
</aside>
Tenete presente che è possibile utilizzare il tag <aside> anche nidificato
all’interno dei tag che identificano il contenuto principale della pagina. In questo
caso il legame con il contenuto principale sarà più forte: pensate per esempio a un
dettaglio sull’autore, all’organizzazione di un glossario o alle note di
approfondimento di un articolo.
<main>
<article>
<h1>Articolo principale</h1>
<p>Qui trova spazio il contenuto principale</p>
<aside>
<h3>Note</h3>
<p>Qui trovano spazio eventuali approfondimenti.</p>
</aside>
</article>
</main>
Come vedete, la flessibilità dei tag permette di creare la struttura più adatta per
il contenuto che state realizzando, descrivendo i contenuti in modo adeguato.
Il piè di pagina: <footer>
