Balise HTML <aside>
La balise HTML <aside> définit du contenu tangentiel, comme une barre latérale, et crée un repère ARIA complémentaire pour l'accessibilité.
La balise <aside> est l'un des éléments HTML5 utilisés pour définir une section contenant du contenu tangentiellement lié au contenu principal. Elle est généralement utilisée pour enrichir un article avec des informations supplémentaires ou pour mettre en valeur des parties susceptibles d'intéresser l'utilisateur. Le contenu d'un aside est une partie autonome et non essentielle de la page web ; si vous le supprimez, le contenu principal n'en sera pas affecté.
Les notes de fin de document, les commentaires, les listes de termes, les informations de référence, les collections de liens, les citations encadrées, etc. sont des exemples d'informations pouvant figurer dans l'élément <aside>.
Ne confondez pas l'élément <aside> avec une barre latérale. La barre latérale est simplement un élément visuel, et la balise <aside> ne ressemble pas systématiquement à une barre latérale.
N'utilisez pas l'élément <aside> pour du texte entre parenthèses, car il est destiné à du contenu tangentiel et non à du texte en ligne ou complémentaire dans le flux principal.
Vous pouvez utiliser cet élément pour des effets typographiques sur du contenu séparé du contenu principal de la page. Par exemple, il peut être utilisé pour des bibliographies, des citations encadrées, des commentaires d'informations complémentaires, etc.
Pourquoi utiliser <aside> ? Accessibilité et SEO
La véritable raison de choisir <aside> plutôt qu'un conteneur générique est la sémantique. Un <aside> au niveau de la page (placé en dehors de tout <article> ou <section>) correspond au rôle de repère ARIA complementary. Cela a des effets concrets :
- Les lecteurs d'écran l'exposent comme un repère. Les utilisateurs de technologies d'assistance peuvent lister et accéder directement aux régions « complémentaires », tout comme ils le font avec
<nav>et<main>. Un<div>générique ne fournit aucun repère de ce type. - Il clarifie le plan du document. Les moteurs de recherche et les outils d'accessibilité construisent une carte structurelle de la page ;
<aside>leur indique que ce bloc est un contenu de soutien, et non le contenu principal. - Il signale l'intention aux autres développeurs. Le balisage lui-même documente que le contenu est tangentiel et peut être retiré.
Un <aside> porte toujours le rôle ARIA implicite complementary. Mais lorsqu'il est imbriqué à l'intérieur d'un <article> (ou <section>), il est limité à ce contenu, et les lecteurs d'écran ne le présentent généralement pas comme un repère de page de haut niveau — il est lu comme lié à l'article plutôt qu'à l'ensemble de la page.
Si une page comporte plusieurs <aside>, donnez à chacun un nom accessible distinct avec aria-label ou aria-labelledby afin que les utilisateurs de lecteurs d'écran puissent distinguer les repères :
<aside aria-label="Author bio">…</aside>
<aside aria-labelledby="related-heading">
<h2 id="related-heading">Related articles</h2>
…
</aside>Syntaxe
La balise <aside> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<aside>) et la balise fermante (</aside>).
Exemple de la balise HTML <aside> :
Balise 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>Résultat
<aside> imbriqué dans un <article>
Ici, le <aside> se trouve à l'intérieur de l'<article>. Le contenu principal vient en premier, et l'aside suit sous la forme d'une note « Le saviez-vous ? » clairement tangentielle à cet article particulier. Étant imbriqué, les navigateurs et les lecteurs d'écran le traitent comme lié à l'article plutôt que comme un repère de niveau page.
Exemple de la balise HTML <aside> avec la balise <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> en barre latérale de page vs <aside> dans un article
Le placement du <aside> change sa signification. Un <aside> placé en dehors de tout <article> ou <section> est un aside de niveau page — généralement une barre latérale de liens, de publicités ou d'articles connexes qui soutient l'ensemble de la page. Un <aside> placé à l'intérieur d'un <article> ne soutient que cet article.
<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>Vous pouvez utiliser plusieurs <aside> sur une même page, et ils peuvent être imbriqués à différents niveaux. Donnez à chaque aside de niveau page un aria-label ou un aria-labelledby afin que son repère soit nommé de façon unique.
La différence entre les balises <aside> et <div>
L'élément <div> est un conteneur générique sans signification sémantique — pour les technologies d'assistance, il est structurellement invisible et n'expose rien au-delà du texte qu'il contient. Un <aside> au niveau de la page, en revanche, expose un repère complementary vers lequel les utilisateurs de lecteurs d'écran peuvent naviguer directement. Cette différence influe sur l'accessibilité et le SEO.
Comparez les deux approches pour baliser une barre latérale :
<!-- 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>Quand utiliser encore <div> ? Optez pour <div> lorsque le wrapper existe uniquement pour le style ou la mise en page (une cellule de grille, un wrapper flex, une enveloppe de carte) et n'a pas de signification autonome et tangentielle. Si le bloc est un contenu de soutien mais supprimable, préférez <aside> ; s'il s'agit simplement d'un crochet pour CSS, <div> est la bonne solution.
Attributs
La balise <aside> prend en charge les attributs globaux et les attributs d'événement.
Exemple avec un attribut global :
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>Comment styliser une balise HTML <aside>
L'élément <aside> ne possède aucun style visuel par défaut ; vous devez donc généralement ajouter le vôtre. Les couleurs ci-dessous sont illustratives — utilisez les design tokens de votre projet ou des valeurs nommées dans le code de production plutôt que des littéraux hexadécimaux bruts :
aside {
background-color: whitesmoke;
border-left: 4px solid lightgray;
padding: 10px;
}Compatibilité navigateurs et historique
L'élément <aside> a été introduit dans HTML5 et est pris en charge par tous les navigateurs modernes. Avant HTML5, les développeurs balisaient le même contenu avec un conteneur générique tel que <div id="sidebar">, qui ne transmettait aucune signification aux navigateurs, aux moteurs de recherche ni aux technologies d'assistance. L'élément sémantique <aside> remplace ce modèle.
Éléments connexes
<article>— contenu autonome qu'un<aside>soutient souvent.<main>— le contenu principal du document.<section>— un regroupement thématique de contenu.<nav>— un autre élément de repère, pour les liens de navigation.