`aside` : contenu complémentaire
Utilisez `aside` pour les barres latérales et le contenu associé indirectement.
`aside` : contenu complémentaire est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
L’élément aside
L’élément <aside> balise un contenu indirectement associé au contenu environnant :
- Il peut être séparé du contenu principal sans que celui-ci perde son sens
- Pensez aux barres latérales, aux encadrés mis en avant, aux citations détachées et aux publicités
aside dans un article
Dans un article, aside indique une information associée au récit, mais qui n’est pas essentielle :
<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 au niveau de la page
Au niveau de la page, aside sert à créer des barres latérales :
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>Rôle ARIA de aside
Un <aside> au niveau de la page correspond à 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 -->Citations détachées avec aside
Les citations détachées (extraits de citations destinés à attirer l’attention) peuvent être balisées comme aside :
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>Publicités avec aside
Les blocs publicitaires des barres latérales peuvent être balisés comme aside :
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>aside ou section
Distinction essentielle :
<aside>— indirectement associé au contenu principal ; complémentaire<section>— fait partie du contenu principal sur le plan thématique
aside pour les termes du glossaire
Utilisez aside pour définir les termes employés dans 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>Plusieurs sections dans une barre latérale
Une barre latérale aside peut contenir plusieurs sections indépendantes :
<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 n’a pas besoin de titre
Contrairement à section, aside n’exige pas nécessairement de titre :
<!-- 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 ne sert pas à la mise en forme indirecte
Aside est sémantique : ne l’utilisez pas uniquement pour créer visuellement une barre latérale :
<!-- 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>Vérification rapide
À quel rôle de repère ARIA un aside au niveau de la page correspond-il ?
Récapitulatif : aside
Principes essentiels de aside :
- Contenu indirectement associé au contenu environnant
- Barre latérale au niveau de la page → repère complémentaire
- Dans un article → informations complémentaires (définitions de termes, encadrés)
- Identifiez plusieurs asides avec aria-label
- Ne convient pas aux conteneurs de mise en page pure : utilisez div dans ce cas
Questions Fréquemment Posées
La leçon « `aside` : contenu complémentaire » est-elle gratuite ?
Oui — le texte complet de « `aside` : contenu complémentaire » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « `aside` : contenu complémentaire » ?
Utilisez `aside` pour les barres latérales et le contenu associé indirectement. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « `aside` : contenu complémentaire » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- `aside` : contenu complémentaire
- `figure` et `figcaption` revisités
- `details` et `summary` : composant d’affichage
- Les éléments `progress` et `meter`