Il tag <aside> viene inserito nei file HTML per creare dei contenuti secondari ma in qualche modo correlati all’articolo che si sta leggendo come quando in un libro ci sono dei riquadri su parole, concetti o luoghi menzionati nello stesso capitolo. Si tratta, in genere, di un blocco che contiene delle informazioni di approfondimento relativo all’articolo che si sta leggendo.
L’elemento aside è supportato da tutti i browser principali più aggiornati ma non viene visualizzato in modo diverso dagli altri elementi. Per dare una sua caratterizzazione, come bordi e colori di sfondo, si possono usare le regole CSS.
Inserire un elemento aside in HTML
Supponiamo di volere creare un riquadro in questo articolo che spiega cos’è il linguaggio HTML. In una parte del file dove scriviamo il codice inseriremo il blocco corrispondente:
<aside>
<h2>Cos'è l'HTML?</h2>
<p>L'HTML è il linguaggio usato per scrivere delle pagine web</p>
</aside>
In se stesso questo elemento non viene visualizzato, proprio come per i blocchi div e article. L’unica cosa che si leggerà sarà il sottotitolo e il paragrafo.
Tuttavia, è possibile inserire delle regole di stile e assegnargli una classe. L’elemento aside supporta tutti i tipi di attributi del linguaggio HTML.
<aside class="appr">
<h2>Cos'è l'HTML?</h2>
<p>L'HTML è il linguaggio usato per scrivere delle pagine web</p>
</aside>
.appr {
border: solid darkred;
background-color: lightgray;
width: 50%;
}
Questo elemento può anche essere posizionato a destra o a sinistra di un contenuto. Per fare ciò bisogna ridurre le sue dimensioni rispetto al resto del blocco in cui è contenuto tramite l’attributo width e impostando l’attributo float a destra (right) o a sinistra (left). Non dandogli nessuna dimensione specifica, il riquadro di approfondimento si posizionerà esattamente dove lo abbiamo scritto nel codice, avendo sopra e sotto di esso i rispettivi elementi inseriti nel file HTML.
