aside facebook twitter youtube

La balise <aside>

Permet de déclarer une section associée soit à la balise <article> soit au document.
Déclarée au sein d'une balise <article> l'élément aside est censé proposer un contenu en relation avec celui-ci, qui le complète mais qui n'est pas nécéssaire pour sa compréhension (l'article doit être compréhensible sans la balise <aside>).

l’élément <aside> est destiné à l’abriter. Il ne s’agit pas simplement de le considérer comme une section vouée à être rendue graphiquement à gauche ou à droite du contenu principal, mais bien d’un point de vue sémantique comme une section possédant une substance périphérique ou ampliative.

On peut considérer comme répondant à ces critères : une définition d’un des termes utilisés dans le contenu, une biographie, un glossaire, une chronologie apportant un fond historique, voire d’autres éclaircissements, astuces et notes qui n’ont de limite que l’imagination.

Exemple

<body>
  <!-- Contenu du document... -->
  <aside>
    <h2>Gestion</h2>
    <ul>
      <li><a href="/panier">Panier</a></li>
      <li><a href="/commandes">Commandes</a></li>
      <li><a href="/suivi">Suivi</a></li>
    </ul>
    <h2>Glossaire</h2>
    <dl>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets</dd>
      <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
    </dl>
  </aside>

</body>

Dans un <article>, <aside> joue le même rôle, mais avec une influence locale, c’est à-dire tangentielle au contenu de l’article. Au regard de la valeur sémantique, son contenu possède une influence moins forte que celui de l’article parent.

Il peut aussi s’agir d’une citation du contenu qui doit être mise en valeur d’une manière particulière, une remarque qui doit être lue entre parenthèses, ou d’un texte qui sort tout simplement du flot narratif principal.

Exempl 2

<article>
  <header>
    <!-- En-tête d’article -->
  </header>
  <p>Contenu de l’article...</p>
  <aside>
    <p>Ressources complémentaires :</p>
    <ul>
      <li><a href="#">page1 </a></li>
      <li><a href="#">page2 </a></li>
    </ul>
  </aside>
  <footer>
    <!-- Pied d’article -->
  </footer>
</article>

Dans cet exemple, <aside> regroupe des liens de navigation vers des lectures additionnelles.



  • section

    section

    Élément fondamental de la nouvelle approche de découpe sémantique des documents,

    .......
    Voir Plus
  • article

    article

    Il possède une plus forte valeur sémantique, et pour cela il faut le considérer comme une portion de document qui se suffit à elle-même, par exemple une entrée distincte parmi d’autres.

    .......
    Voir Plus
  • header

    header

    Comme son nom le suggère, <header> correspond à un en-tête de section. Il peut s’agir de l’en-tête général du document
    <body>, s’il est placé de telle sorte dans la hi&eac

    .......
    Voir Plus
  • footer

    footer

    La balise <footer> est utilisée pour décrire le pied de page d'un document ou d'une section

    .......
    Voir Plus
  • nav

    nav

    La balise <nav> détermine une section dans laquelle sont regroupés des liens de navigation vers d'autres pages

    .......
    Voir Plus
  • address

    address

    La balise <address> est utilisée pour indiquer un contenu de type adresse mail. Ce tag doit être fermé avec le tag </address>.

    .......
    Voir Plus
  • Heading

    Heading

    Les éléments de type <hX> où X représente un chiffre entre 1 et 6 correspondent à des titres (heading en anglais) de niveaux différents.

    .......
    Voir Plus
  • hgroup

    hgroup

    L’élément <hgroup> regroupe un ou plusieurs titres <h1> à <h6>. Idéalement, il n’a de vocation à être utilisé qu’à partir de deux titres, car il

    .......
    Voir Plus
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces