Aside

Funzioni e dati tecnici

L'elemento <aside> rappresenta una sezione di una pagina costituita da informazioni che sono marginalmente correlate al contenuto dell'elemento padre che la contiene, e che potrebbero essere considerate distinte da quest'ultimo. Questo è ciò che viene indicato nelle specifiche HTML5, ma è facile immaginare l'utilità del tag <aside> semplicemente pensandolo come un contenitore di approfondimento in cui possiamo inserire gruppi di link, pubblicità, bookmark e così via.

<aside>
<h1>Questi sono dei contenuti di approfondimento marginali rispetto al contenuto principale</h1>
<nav>
<h2>Link a pagine correlate al contenuto</h2>
<ul>
<li>Informazione correlata al contenuto</li>
<li>Informazione correlata al contenuto</li>
<li>Informazione correlata al contenuto</li>
</ul>
</nav>
<section>
<h2>Pubblicità</h2>
[immagini pubblicitarie]
<section>
</aside>

Aside: esempi concreti

Ritornando al nostro progetto guida, dopo aver definito il contenuto dell'elemento <nav>, possiamo analizzare la parte di codice in cui abbiamo utilizzato il tag <aside>:

<aside>
<h1>Sidebar</h1>
<section>
<h2>Ricerca nel form:</h2>
<form name="ricerca" method="post" action="/search">
<label> Parola chiave:
<input type="search" autocomplete="on" placeholder="article, section, ..." name="keyword" required maxlength="50">
</label>
<input type="submit" value="ricerca">
</form>
</section>
<nav>
<h2>Categorie</h2>
<ul>
<li><a href="/categoria/multimedia">multimedia</a></li>
<li><a href="/categoria/text">marcatori testuali</a></li>
<li><a href="/categoria/form">forms</a></li>
</ul>
</nav>
</aside>

Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresenta nel nostro progetto:

Come possiamo notare, il form per la ricerca di parole chiave e i link alle categorie presenti nel nostro blog non sono informazioni particolarmente rilevanti per il contenuto centrale della nostra pagina, pertanto possiamo facilmente separarli con l'elemento <aside> che li qualifica come contenuti marginali.

Nel nostro caso abbiamo utilizzato un <aside> per contenere la colonna sinistra del blog, ma in realtà, visto che in diversi siti va di moda la presenza di footer molto grossi con diversi link, consigliamo di utilizzare l'elemento <aside> in combinazione con il tag <nav> che potrebbe essere la soluzione migliore per questa tipologia di contenuti dato che, come abbiamo potuto constatare nella lezione dedicata al footer, ciò non è possibile farlo all'interno del tag <footer>.

Così come gli elementi <article>, <section> e <nav> anche l'<aside> appartiene alla categoria dei "contenitori di sezionamento dei contenuti" in quanto per l'outliner necessita di un titolo che riassuma i propri contenuti.

Ricordiamo però che non è obbligatorio inserire un titolo per gli elementi che vengono considerati delle sezioni a sé stanti dall'outliner, infatti in questo caso queste sezioni rimarrebbero senza titolo ma non genererebbero nessun errore di validazione.

Vediamo quindi ora che abbiamo completato la struttura del blog come è l'outline del nostro documento Outline.

Nella prossima lezione comprenderemo come usare l'elemento <hgroup> e la sua importanza per l'outline di un documento in HTML5.

Tabella del supporto sui browser

Nuovi tag semantici e strutturali
<aside>	9.0+	3.0+	3.1+	5.0+	10.0+