Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

<aside> : l'élément aparté

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨juillet 2015⁩.

L'élément HTML <aside> représente une partie d'un document dont le contenu n'est lié que de façon indirecte au contenu principal du document. Les apartés sont fréquemment présentés sous forme de barres latérales ou d'encadrés.

Exemple interactif

<p>
  Les salamandres sont un groupe d'amphibiens à l'apparence de lézard, avec de
  courtes pattes et une queue à la fois à l'état larvaire et adulte.
</p>

<aside>
  <p>Le triton à peau rugueuse se défend avec une neurotoxine mortelle.</p>
</aside>

<p>
  Plusieurs espèces de salamandres habitent la forêt pluviale tempérée du
  nord-ouest du Pacifique, dont l'ensatine, la salamandre du nord-ouest et le
  triton à peau rugueuse. La plupart des salamandres sont nocturnes et chassent
  des insectes, des vers et d'autres petites créatures.
</p>
aside {
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-style: italic;
  color: #29627e;
}

aside > p {
  margin: 0.5rem;
}

Attributs

Cet élément inclut uniquement les attributs universels.

Notes d'utilisation

  • N'utilisez pas l'élément <aside> pour baliser un texte entre parenthèses, car ce type de texte est considéré comme faisant partie du flux principal.

Exemples

Utilisation de <aside>

Cet exemple utilise <aside> pour baliser un paragraphe dans un article. Le paragraphe n'est lié que de façon indirecte au contenu principal de l'article :

html
<article>
  <p>
    Le film Disney <cite>La petite Sirène</cite> est sorti en salles en 1989.
  </p>
  <aside>
    <p>Le film a gagné 87 millions de dollars pendant sa sortie initiale.</p>
  </aside>
  <p>Plus d'informations sur le film…</p>
</article>

Résultat

Résumé technique

Catégories de contenu Contenu de flux, contenu de section, contenu tangible.
Contenu autorisé Contenu de flux.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisés Tout élément acceptant du contenu de flux. Notez qu'un élément <aside> ne doit pas être un descendant d'un élément <address>.
Rôle ARIA implicite complementary
Rôles ARIA autorisés feed, none, note, presentation, region, search
Interface DOM HTMLElement

Spécifications

Specification
HTML
# the-aside-element

Compatibilité des navigateurs

Voir aussi