Accueil    HTML    Balise Aside
 



balise aside  Balise ASIDE : contenu tangentiel

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



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>).

Associée au document, la balise aside peut afficher un contenu beaucoup plus libre comme des informations générales ou de la publicité.


Les balises <header>, <nav>, <footer>, <section>, <article> et <aside> (entre autre) redéfinissent les mises en forme historiques des pages web avec des éléments <div> suivant une nouvelle approche sémantique :

structure html5



Exemple d'utilisation de la balise aside :




Exemple de mise en forme de la balise aside :


<style type="text/css">
.article{ float:left; width:320px; margin: 0px 10px;
   border-left:solid 1px silver; border-bottom:solid 1px silver; padding:15px 10px; }
.titre-article{ color:firebrick; font-weight:bold; font-size:16px; }
.aside{ float:right; width:180px; padding-left:15px;
   border-left:solid 1px silver; border-bottom:solid 1px silver; }
</style>


<aside class="aside">
   <br />
   <br />ASIDE
   <br />
   <br />Lien
   <br />publicité
   <br />divers
   <br />
   <br />
   <br />...
   <br />
   <br />
   <br />
   <br />...
   <br />
   <br />
</aside>

<article class="article">
   <header>
      <h1 class="titre-article">Titre de l'article</h1>
   </header>
   <p>
      Descriptif
      ...
      ...
      ...
      ...
      ...
      ...
   </p>
   <footer>
      <time datetime="2012-07-01" pubdate="pubdate">Publié le 01/07/2012</time>
      <Par : auteur de l'article
   </footer>
</article>


Visualiser un exemple complet avec la mise en place des différentes sections.


Titre de l'article


Texte de l'article
...
...
...
...
...
...



Par : auteur de l'article