<aside>

Description

L’élément <aside> identifie un contenu en relation indirecte avec le contenu principal. Il peut s’agir d’une barre latérale, d’une note d’encadré, d’une biographie d’auteur, de publicités ou de liens complémentaires. Retiré du flux principal, son contenu reste compréhensible indépendamment.

Syntaxe

<aside>
  <h2>À lire aussi</h2>
  <ul>
    <li><a href="/article-lie">Article lié</a></li>
  </ul>
</aside>

Exemples

Barre latérale d’informations complémentaires :

<main>
  <article>
    <h1>Découverte du CSS Grid</h1>
    <p>…</p>
  </article>
  <aside>
    <h2>Ressources</h2>
    <ul>
      <li><a href="https://developer.mozilla.org">MDN Web Docs</a></li>
    </ul>
  </aside>
</main>

Note d’encadré dans un article :

<article>
  <p>CSS Grid révolutionne la mise en page…</p>
  <aside>
    <p><strong>Note :</strong> Grid est supporté par tous les navigateurs modernes depuis 2017.</p>
  </aside>
  <p>…</p>
</article>

Notes

Landmark complementary : <aside> crée un landmark ARIA complementary. Les utilisateurs de lecteurs d’écran peuvent y accéder directement ou le sauter.

Pas de contenu principal ici : ne jamais mettre du contenu essentiel à la compréhension de la page dans <aside>. Ce qui est dans <aside> doit pouvoir être retiré sans affecter le sens du reste.