<aside>
Un contenu secondaire, lié de façon lâche à son environnement : encadré, barre latérale, remarque.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu de flux sans élément
<main>
Exemple
#<article>
<h2>Qu’est-ce que le DOM</h2>
<p>Le DOM est un arbre d’objets que le navigateur construit à partir du code HTML.</p>
<aside>
<strong>Anecdote :</strong> le sigle DOM signifie Document Object Model.
</aside>
<p>Chaque balise devient un nœud de cet arbre.</p>
</article>Définition et utilisation
#L’élément <aside> contient du contenu qui complète le texte principal, mais qu’on peut ignorer sans perdre le sens général : un encadré avec une anecdote, un glossaire, une liste d’articles liés ou un panneau latéral publicitaire.
À l’intérieur d’un <article>, l’élément se rapporte à cet article, par exemple comme citation mise en avant ou définition. Placé hors d’un article, il se rapporte à toute la page et joue souvent le rôle de barre latérale.
Les technologies d’assistance reconnaissent <aside> comme un point de repère « complementary ». Par défaut, il n’a aucune apparence particulière ; c’est vous qui lui donnez sa position latérale en CSS.
Syntaxe
#<aside>
…
</aside>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
aside {
display: block;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- N’utilisez pas
<aside>pour une remarque entre parenthèses dans une phrase. Pour une courte note dans le texte, une simple parenthèse ou<small>suffit. - S’il y a plusieurs panneaux latéraux sur une page, donnez-leur un nom avec
aria-label.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.