Tag HTML <aside>
Il tag HTML <aside> definisce contenuto tangenziale, come una barra laterale o una nota, e crea un landmark ARIA complementary per l'accessibilità.
Il tag <aside> è uno degli elementi HTML5 usati per definire una sezione contenente contenuto tangenzialmente correlato al contenuto principale. Viene generalmente utilizzato per arricchire un articolo con informazioni aggiuntive o per mettere in evidenza parti che possono risultare interessanti per l'utente. Il contenuto all'interno di aside è una parte autonoma e non essenziale della pagina web: se lo si elimina, il contenuto principale non ne risulta influenzato.
Note a piè di pagina, commenti, elenchi di termini, informazioni di riferimento, raccolte di link, citazioni estrapolate, ecc. sono esempi di informazioni che possono comparire all'interno dell'elemento <aside>.
Non confondere l'elemento <aside> con una barra laterale. La barra laterale è semplicemente un elemento visivo, e il tag <aside> non si presenta sistematicamente come una barra laterale.
Non utilizzare l'elemento <aside> per testo parentetico, poiché è concepito per contenuto tangenziale e non per testo in linea o supplementare all'interno del flusso principale.
Puoi usare questo elemento per effetti tipografici su contenuto separato dal contenuto principale della pagina. Ad esempio, può essere utilizzato per bibliografie, citazioni estrapolate, commenti con informazioni aggiuntive e così via.
Perché usare <aside>? Accessibilità e SEO
Il vero motivo per scegliere <aside> al posto di un semplice contenitore è la semantica. Un <aside> a livello di pagina (posizionato fuori da qualsiasi <article> o <section>) corrisponde al ruolo di landmark ARIA complementary. Questo produce effetti concreti:
- I lettori di schermo lo espongono come landmark. Gli utenti di tecnologie assistive possono elencare e spostarsi direttamente alle regioni "complementary", esattamente come fanno con
<nav>e<main>. Un generico<div>non fornisce alcun landmark di questo tipo. - Chiarisce la struttura del documento. I motori di ricerca e gli strumenti di accessibilità costruiscono una mappa strutturale della pagina;
<aside>comunica loro che questo blocco è contenuto di supporto, non primario. - Segnala le intenzioni agli altri sviluppatori. Il markup stesso documenta che il contenuto è tangenziale e rimovibile.
Un <aside> porta sempre il ruolo ARIA implicito complementary. Ma quando è annidato all'interno di un <article> (o <section>), è limitato a quel contenuto e i lettori di schermo di norma non lo espongono come landmark di pagina di primo livello — viene letto come correlato all'articolo piuttosto che all'intera pagina.
Se una pagina contiene più di un <aside>, assegna a ciascuno un nome accessibile distinto tramite aria-label o aria-labelledby, in modo che gli utenti di lettori di schermo possano distinguere i landmark:
<aside aria-label="Author bio">…</aside>
<aside aria-labelledby="related-heading">
<h2 id="related-heading">Related articles</h2>
…
</aside>Sintassi
Il tag <aside> viene usato in coppia. Il contenuto è scritto tra il tag di apertura (<aside>) e quello di chiusura (</aside>).
Esempio del tag HTML <aside>:
Tag HTML <aside>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<p>I like watching Game of Thrones.</p>
</main>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Risultato
<aside> annidato all'interno di un <article>
Qui l'<aside> si trova all'interno di <article>. Il contenuto principale viene prima, e l'aside segue come nota "Lo sapevi?" chiaramente tangenziale a quell'articolo specifico. Poiché è annidato, browser e lettori di schermo lo trattano come correlato all'articolo anziché come landmark di pagina.
Esempio del tag HTML <aside> con il tag <article>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the aside tag</h1>
<article>
<h2>Game of Thrones</h2>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels.</p>
<aside>
<h3>Did you know?</h3>
<p>The series ran for eight seasons and won numerous Emmy Awards, becoming one of the most-watched shows in television history.</p>
</aside>
</article>
</body>
</html><aside> a livello di pagina vs. <aside> all'interno di un articolo
Il posizionamento di <aside> ne cambia il significato. Un <aside> collocato fuori da qualsiasi <article> o <section> è un aside a livello di pagina — tipicamente una barra laterale con link, annunci o post correlati che supporta l'intera pagina. Un <aside> collocato all'interno di un <article> supporta solo quell'articolo.
<body>
<main>
<article>
<h2>How to brew pour-over coffee</h2>
<p>Heat the water to about 94°C, then pour slowly in circles…</p>
<!-- In-article aside: tangential to THIS article -->
<aside>
<h3>Tip</h3>
<p>A gooseneck kettle makes the pour much easier to control.</p>
</aside>
</article>
</main>
<!-- Page-level aside: a sidebar supporting the whole page -->
<aside aria-label="Related guides">
<h2>More guides</h2>
<ul>
<li><a href="/french-press">French press</a></li>
<li><a href="/cold-brew">Cold brew</a></li>
</ul>
</aside>
</body>Puoi usare più di un <aside> in una pagina e possono essere annidati a livelli diversi. Assegna a ogni aside di pagina un aria-label o aria-labelledby in modo che il suo landmark abbia un nome univoco.
La differenza tra i tag <aside> e <div>
L'elemento <div> è un contenitore generico privo di significato semantico — per le tecnologie assistive è strutturalmente invisibile e non espone nulla al di là del testo al suo interno. Un <aside> a livello di pagina, al contrario, espone un landmark complementary a cui gli utenti di lettori di schermo possono navigare direttamente. Questa differenza influisce sull'accessibilità e sulla SEO.
Confronta i due approcci per il markup di una barra laterale:
<!-- Before: no semantics, just a styled box -->
<div class="sidebar">
<h2>Related links</h2>
<ul>…</ul>
</div>
<!-- After: a navigable complementary landmark -->
<aside aria-label="Related links">
<h2>Related links</h2>
<ul>…</ul>
</aside>Quando si usa ancora <div>? Ricorri a <div> quando il wrapper esiste esclusivamente per lo stile o il layout (una cella di griglia, un wrapper flex, uno shell di card) e non porta alcun significato autonomo e tangenziale. Se il blocco è contenuto di supporto ma rimovibile, preferisci <aside>; se è solo un aggancio per il CSS, <div> è la scelta corretta.
Attributi
Il tag <aside> supporta gli Attributi Globali e gli Attributi Evento.
Esempio con un attributo globale:
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>Come applicare uno stile al tag HTML <aside>
L'elemento <aside> non ha stili visivi predefiniti, quindi di solito è necessario aggiungerne di propri. I colori qui sotto sono indicativi — usa i token di design del tuo progetto o valori con nome nel codice in produzione anziché valori esadecimali grezzi:
aside {
background-color: whitesmoke;
border-left: 4px solid lightgray;
padding: 10px;
}Supporto dei browser e storia
L'elemento <aside> è stato introdotto in HTML5 ed è supportato da tutti i browser moderni. Prima di HTML5, gli sviluppatori marcavano lo stesso contenuto con un contenitore generico come <div id="sidebar">, che non trasmetteva alcun significato a browser, motori di ricerca o tecnologie assistive. L'elemento semantico <aside> sostituisce quel pattern.
Elementi correlati
<article>— contenuto autonomo che un<aside>spesso supporta.<main>— il contenuto dominante del documento.<section>— un raggruppamento tematico di contenuto.<nav>— un altro elemento landmark, per i link di navigazione.