aside: contenuto complementare
Usare aside per barre laterali e contenuti correlati indirettamente
aside: contenuto complementare è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
L'elemento aside
L'elemento <aside> contrassegna contenuti correlati solo marginalmente al contenuto circostante:
- Può essere separato dal contenuto principale senza perderne il significato
- Pensi a: barre laterali, riquadri di approfondimento, citazioni in evidenza, pubblicità
aside in un article
All'interno di un article, aside contrassegna informazioni correlate ma non essenziali alla narrazione:
<article>
<h2>How the Internet Works</h2>
<p>The Internet is a global network of computers...</p>
<aside>
<h3>Did You Know?</h3>
<p>The first email was sent in 1971 by Ray Tomlinson.</p>
</aside>
<p>Data travels in packets across routers...</p>
</article>aside a livello di pagina
A livello di pagina, aside viene utilizzato per le barre laterali:
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>Ruolo ARIA di aside
Un <aside> a livello di pagina corrisponde a role="complementary":
<aside aria-label="Related resources">
<h2>Related resources</h2>
...
</aside>
<!-- Multiple asides should be uniquely labeled
Screen reader users can jump directly to complementary regions -->Citazioni in evidenza con aside
Le citazioni in evidenza (estratti scelti per il loro impatto visivo) possono essere contrassegnate come aside:
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>Pubblicità con aside
Le unità pubblicitarie nelle barre laterali possono essere contrassegnate come aside:
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>aside vs section
Distinzione fondamentale:
<aside>— correlato solo marginalmente al contenuto principale; supplementare<section>— parte tematica del contenuto principale
aside per i termini del glossario
Utilizzi aside per definire i termini utilizzati in un article:
<article>
<p>The DOM (Document Object Model) is updated when...</p>
<aside id="dom-def">
<dl>
<dt>DOM</dt>
<dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
</dl>
</aside>
</article>Più sezioni nella barra laterale
Un aside nella barra laterale può contenere più section indipendenti:
<aside aria-label="Sidebar">
<section>
<h2>About the Author</h2>
<p>Jane Smith is a senior web developer...</p>
</section>
<section>
<h2>Popular Posts</h2>
<ul>...</ul>
</section>
</aside>aside non richiede un'intestazione
A differenza di section, aside non richiede necessariamente un'intestazione:
<!-- Valid aside without heading: -->
<aside>
<img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
<h2 class="sr-only">Promotions</h2>
<img src="banner.jpg" alt="20% off this week only">
</aside>aside non serve per lo stile marginale
Aside è un elemento semantico: non lo utilizzi soltanto per creare visivamente il layout della barra laterale:
<!-- BAD: aside used for layout only -->
<aside class="right-column"> <!-- no semantic relationship to main content -->
<div class="ad">...</div>
</aside>
<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>Verifica rapida
A quale ruolo landmark ARIA corrisponde un aside a livello di pagina?
Riepilogo: aside
Elementi essenziali di aside:
- Contenuto correlato solo marginalmente al contenuto circostante
- Barra laterale a livello di pagina → landmark complementary
- All'interno di un article → informazioni supplementari (definizioni di termini, riquadri di approfondimento)
- Assegni
aria-labelai diversi aside per distinguerli - Non serve per contenitori di puro layout: utilizzi div
Domande Frequenti
La lezione «aside: contenuto complementare» è gratuita?
Sì — il testo completo di «aside: contenuto complementare» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «aside: contenuto complementare»?
Usare aside per barre laterali e contenuti correlati indirettamente Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «aside: contenuto complementare»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- aside: contenuto complementare
- figure e figcaption: approfondimento
- details e summary: widget di divulgazione
- Gli elementi progress e meter