L’élément footer

Nous sommes déjà habitués depuis un bon bout de temps de voir <div id="pied-de-page"> à la fin du code source de pages Web. Avec HTML5, c’est maintenant le temps de dire adieu à cette technique. Avec l’ajout de l’élément <footer>, nous avons accès à plus de flexibilité et à une meilleure sémantique.

Selon la spécification

L’élément <footer> représente le pied de page pour son ancêtre le plus près qui définit une section ou pour l’élément racine. Typiquement, <footer> contient de l’information sur sa section, comme son auteur, des liens vers des documents reliés, les données sur les droits d’auteur et ainsi de suite.

Note: ceci est une traduction libre de la spécification HTML5. Vous pouvez vous référer à la version originale en anglais ou attendre qu’une version officielle en français soit disponible.

Allons-y

Avant de disséquer ce nouvel élément, nous devons mettre en place les prémisses de cet article. Comme nous l’avons déjà mentionné, la plupart des développeurs auraient organisé le pied de page de cette manière.

<div id="pied-de-page">
  <ul>
     <li>droits d’auteur</li>
     <li>carte du site</li>
     <li>contactez-nous</li>
     <li>retour au début de la page</li>
  </ul>
<div>

Nous pouvons le faire autrement en HTML5. Vous vous rappelez sûrement qu’il n’est plus nécessaire d’utiliser <div> dans bien des cas en HTML5. Pour notre exemple, lorsque nous référons à un pied de page, un balisage correct utilise <footer>.

<footer>
  <ul>
     <li>droits d’auteur</li>
     <li>carte du site</li>
     <li>contactez-nous</li>
     <li>retour au début de la page</li>
  </ul>
</footer>

Auparavant, nous utilisions un seul pied de page par document. Avec l’ajout de l’élément <footer>, nous pouvons réutiliser ce concept pour chaque section ou article d’un document. Nous pouvons donc afficher de l’information supplémentaire reliée à ceux-ci de façon plus sémantique.

Utiliser l’élément <footer>

Vous pouvez utiliser de cette manière, et ce plus d’une fois par page :

Section

<section>
   Le contenu de la section apparaît ici.
   <footer>
   L’information du pied de page pour cette section.
   </footer>
</section>

Article

<article>
   Le contenu de l’article apparaît ici.
   <footer>
   L’information du pied de page pour cet article.
   </footer>
</article>

Si vous voulez voir un bon exemple de <footer>, vous pouvez regarder le code source de cet article. À la fin de celui-ci, vous remarquerez une section de texte gris, juste en dessous de la section « pour en savoir plus ». Cette section vous donnera de l’information sur les rétroliens, les commentaires, les catégories et les « tags ». Elle utilise l’élément <footer>.

Pied de page

Pour l’utilisation de <footer> comme pied de page traditionnel, regardez le premier exemple de son utilisation ci-haut.

Modèle de contenu

Le modèle de contenu de <footer> accepte aussi les éléments créant des sections comme <header> et <nav>. En fait, <footer> fonctionne pratiquement de la même manière que <header>. Il est important de noter que <footer> lui-même n’introduit pas une nouvelle section.

D’autres observations

J’ai été initialement surpris du nom très « présentation » de l’élément ; mon utilisation du pied de page ici n’est pas à la fin de la page, ni même à la fin de l’article, mais elle semble correspondre à la définition de l’élément – c’est de l’information sur sa section, qui contient le nom de l’auteur, des liens vers des documents reliés (les commentaires) et ainsi de suite. Il n’y a pas de raison de penser que vous ne pouvez pas avoir plus d’un élément <footer> par page ; la description de l’élément dans la spécification dit « l’élément <footer> représente un pied-de-page pour la section à laquelle il fait référence » et vous pouvez avoir plusieurs sections dans une page. La spécification dit aussi « Les pieds de page ne doivent pas nécessairement apparaître à la fin d’une section, mais vont généralement l’être »

Bruce Lawson – http://www.brucelawson.co.uk/2009/marking-up-a-blog-with-html-5-part-2/

En conclusion

L’élément <footer> nous donne la chance de mieux définir les pages Web et de leur donner le balisage sémantique qu’elles méritent. Il est toutefois vital de bien utiliser les nouveaux éléments pour ce pourquoi ils ont été créés. Il ne faut pas faire les mêmes erreurs que nous avons déjà faites avec les <table> et les <div>.

Pour en savoir plus

Partagez :
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay


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.