Dans cet article
La balise <aside> est utilisée pour définir un contenu secondaire ou complémentaire lié au contenu principal de la page.
Ce contenu est souvent présenté sous forme de panneaux latéraux (comme des menus par exemple 😉), d'encarts informatifs, ou de publicités, mais peut aussi inclure des annexes comme des sources ou des définitions par exemple sur un article.
Bon à savoir
Il s'agit d'une des nouvelles balises qui sont arrivées avec HTML5 !
Structure et syntaxe de la balise <aside>
HTML
<aside>
<!-- Contenu complémentaire -->
</aside>
Exemples d'utilisation
Définir les informations d'un auteur
HTML
<aside>
<h3>À propos de l'auteur</h3>
<p>Believemy forme plus de 10 000 développeurs par an à devenir freelance.</p>
</aside>
Définir des articles connexes
HTML
<main>
<article>
<h1>React vs Next.js</h1>
<p>React et Next.js sont deux technologies incontournables dans le développement web moderne...</p>
</article>
<aside>
<h3>Articles connexes</h3>
<ul>
<li><a href="https://believemy.com/r/les-nouveautes-de-nextjs-15">Tout savoir sur NextJS 15</a></li>
<li><a href="https://believemy.com/r/les-nouveautes-de-react-19">Tout savoir sur React 19</a></li>
</ul>
</aside>
</main>
Attributs
La balise <aside> n'a pas d'attributs spécifiques, mais elle accepte tous les attributs globaux de HTML.
| Attribut | Description | Valeur possible |
|---|---|---|
id | Identifiant unique pour cibler l'élément. | Texte unique. |
class | Classe(s) CSS pour styliser le contenu. | Liste de classes séparées par des espaces. |
style | Style CSS en ligne. | Déclarations CSS. |
hidden | Masque l’élément aux utilisateurs. | Aucune ou hidden. |
lang | Spécifie la langue utilisée dans l'encart. | Code de langue (fr, en, etc.). |
Compatibilité des navigateurs
La balise <aside> est compatible avec tous les navigateurs (sauf Internet Explorer 11, car il s'agit d'une balise HTML5).
| Elément | Google Chrome | Safari | Mozilla Firefox | Edge |
| <aside> | Oui | Oui | Oui | Oui |