English

<aside>

Ajouter du contenu que tu pourrais retirer sans rien perdre

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • structure

<aside> — Le contenu complémentaire

La balise <aside> encadre un contenu complémentaire : encart, citation mise en avant, glossaire latéral, publicité. Le contenu est lié au contexte mais pas indispensable à la compréhension du contenu principal.

Quand l'utiliser

Tu veux ajouter une note latérale, un encart "Le savais-tu ?", une liste de liens connexes, ou un widget qui enrichit la page sans en faire partie intégrante.

Ce que tu gagnes

Accessibilité : le <aside> crée un complementary landmark. Les lecteurs d'écran permettent de le sauter ou de s'y rendre directement.

Exemple de code

<main>
  <article>
    <h1>Understanding landmarks</h1>
    <p>Landmarks help users navigate complex pages...</p>
  </article>
  <aside>
    <h2>Related articles</h2>
    <ul>
      <li><a href="/blog/nav">The nav element</a></li>
      <li><a href="/blog/main">The main element</a></li>
    </ul>
  </aside>
</main>

Pour aller plus loin