Comprendre la balise aside

HTML5 contient un nouvel élément qui sert à encapsuler de l’information supplémentaire relative à un article ou une page, mais qui n’est pas absolument nécessaire à sa compréhension.

Premièrement, regardons comment la spécification HTML5 défini la balise <aside>.

Note : Ceci est une traduction libre de la spécification. Référez-vous à l’original en anglais ou à la traduction officielle lorsqu’elle sera disponible.

« L’élément aside représente une section de la page qui renferme du contenu qui est tangentiellement relatif au contenu autour de l’élément aside, et qui peut être considéré comme étant séparé de ce contenu. Ces sections sont souvent représentées par des encadrés en imprimerie. »

Le contenu de la balise <aside> doit pouvoir exister par elle-même et être relative à son contexte dans la page (généralement un article). Si votre contenu respecte cette définition, vous aurez un élément de plus pour renforcer la sémantique de la structure de votre document et pour y appliquer des règles CSS.

Nous pouvons en fait utiliser <aside> dans deux contextes, le premier est un article et le second le site Web lui-même, il est donc crucial d’y bien faire attention. Quand <aside> est à l’intérieur de la balise <article>, le contenu doit être relié à l’article (glossaire, des citations de l’article, liens relatifs à celui-ci). Lorsqu’utilisé en dehors d’une balise <article>, le contenu de <aside> doit être relié au site dans son ensemble (liste de liens préférés du blogue, navigation additionnelle, et même de la publicité si elle est reliée à la page).

Voici quelques exemples : le premier démontre l’utilisation de <aside> dans les deux contextes et les suivants portent sur l’utilisation de <aside> à l’intérieur d’une balise <article> :

<body>
  <header>
    <h1>Mon Blogue</h1>
  </header>
  <article>
    <h1>Mon billet de mon blogue</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <aside>
      <!—Vu que ce aside est à l’intérieur de la balise article, l’analyseur syntaxique va comprendre que le contenu de la balise est directement relié à l’article lui-même. -->
      <h1>Glossaire</h1>
      <dl>
        <dt>Lorem</dt>
        <dd>ipsum dolor sit amet</dd>
      </dl>
    </aside>
  </article>
  <aside>
    <!—Ce aside est en dehors de la balise article. Son contenu est relié à la page, mais pas autant que la balise aside à l’intérieur de la balise article. -->
    <h2>Mes liens préférés</h2>
    <ul>
      <li><a href="#">Mon ami</a></li>
      <li><a href="#">Mon autre ami</a></li>
      <li><a href="#">Mon meilleur ami</a></li>
    </ul>
  </aside>
</body>

Comme il est suggéré dans la spécification, une citation prise de l’article est un excellent exemple de contenu qui est séparé du corps de l’article, mais qui y est encore relié.


<article>
    <header>
        <h1>Lorem Ipsum Dolor Sit Amets</h1>
    </header>
    <p>Aliquam erat volutpat. Vestibulum eleifend pellentesque urna, at
    sodales est faucibus sit amet. Praesent in mi dui. <q>Aliquam sed
    bibendum nisl. Mauris pharetra enim sit amet ipsum dictum placerat. Sed
    lacinia pulvinar iaculis. Nam sit amet hendrerit purus.</q> Sed a urna
    laoreet lorem pulvinar fermentum. Aenean vel luctus libero. Ut tincidunt
    metus sagittis ante viverra feugiat.</p>
    <aside>
        <q>Mauris pharetra enim sit amet ipsum dictum placerat.</q>
    </aside>
    <p>Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
    luctus enim, vitae mollis enim purus non ante.</p>
</article>

Sur une page Web comprenant un style CSS, ou plus couramment, dans l’imprimé, cet élément serait représenté visuellement dans un encadré sur le côté de l’article. Cet <aside> est relié à l’article, mais n’a pas besoin de faire proprement partie de l’article pour être compris par le lecteur.

Voici un autre exemple représentant un glossaire de la terminologie utilisée dans un article.


<article>
    <header>
        <h1>Technologies Web</h1>
    </header>
    <p>Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit,
    eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum
    turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus
    bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel
    urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.</p>
    <aside>
        <dl>
            <dt>CSS</dt>
            <dd>Un ensemble de standards pour définir la présentation de document sur le World Wide.</dd>
            <dt>PHP</dt>
            <dd>Un langage de scripting côté serveur utilisé pour créer des documents HTML dynamiques pour le.</dd>
            <dt>JavaScript</dt>
            <dd>Un langage de scripting côté client utilisé pour manipuler les documents <abbr>HTML</abbr> à l’intérieur d’un navigateur.</dd>
        </dl>
    </aside>
</article>

Utilisation incorrecte de <aside>

Attention à la publicité, si celle-ci n’est pas reliée à l’article ou la page, elle ne doit pas être dans un <aside> peut être très utile pour améliorer la sémantique de la structure d’un document HTML. Elle peut être utiliser pour faire ressortir certaines parties d’un article ou ajouter de l’information complémentaire. Le contenu de <aside> doit pouvoir exister par lui-même et ne pas être essentiel à l’article ou la page qui y est associée.

La balise <aside> peut inclure du contenu secondaire à la page et au site, en plus du contenu secondaire à un article. Il est important de se rappeler que <aside> ne veut pas nécessairement dire colonne de droite. La présentation de la balise ne doit pas dicter son utilisation. Pour le contenu qui est secondaire, mais quand même relié à l’article (ou la page), aside est ce dont vous avez besoin, peu importe sa présentation visuelle.

HTML5 offre plusieurs nouvelles balises sémantiques qui vous aideront à mieux structurer vos documents HTML, utilisez-les avec sagesse.

Pour en savoir plus :



4 commentaires pour “ Comprendre la balise aside ”

Commentaire par Casp le

Ok … Mais alors si justement j’ai un contenu sans rapport ?
J’utilise quoi comme balise ?
par exemple une alerte pour IE, ou bien en encart publicitaire, ou que sais je … J’utilise alors ?

Commentaire par De`Gry le

Question.
Cela fait quelque temps qu’il a été démontré que l’utilisation de la propriété CSS float est bien trop souvent éloignée de son sens premier, puisqu’elle sort le bloc du flux.

Sauf qu’ici, aside représente un contenu lié mais ne faisant pas partie intégrante du contenu auquel il est lié (ce n’est pas un paragraphe, aucun sens sémantique si ce n’est « en rapport avec ça, il y a… ».
La sortie du flux serait donc justifiée, et ainsi l’utilisation de float (ça serait donc l’un des seuls cas, à vrai dire).

Right ?

Commentaire par Balt le

@De’Gry
Rien à voir, le flux dont tu parles concerne la présentation, aside est une balise html5 sémantique et concerne donc le contenu

Laisser un commentaire

Vous pouvez utiliser ce balises : <a href="" title=""> <abbr title=""> <b> <blockquote cite=""> <cite> <del datetime=""> <em> <i> <q cite=""> <strong>

Vous pouvez aussi utiliser <code>, mais n'oubliez pas d'utiliser &lt; and &gt; pour les balises.