HTML5 : La balise Footer

Trucsweb.com

Pour le document mais aussi par section. Avec menu, coordonnées, copyright et retour en haut, dates...! Une autre balise philosophique en quelque sorte!

René Descartes (1596-1650), philosophe français

Le contenu définit la balise. C’est là l’essence de cette balise :

informations sur l’auteur
dates
informations du copyright
informations de contact
plan du site
lien retour en haut(!)
documents connexes

Rien de moins! Ou devrais-je dire, rien de plus! Un menu général! On comprendra que ce futile exorcise décrit essentiellement un pied de page comme son nom devrait l’indiquer. Qu’est-ce que ce contenu peut faire à l’intérieur d’une énième section de page, c’est de la recommandation!

Exemple

<body>
  
  <footer>
    <p>Dernière modification : <time datetime="2014-11-08 20:00">2014-11-08 20:00</time></p>
  </footer>
</body>

Inutile, non, c’est une singularité sémantique et culturelle du web. Pour un Couillard en Islande je veux bien mais un Hollande au Canada ça reste une balise! Vous aller me dire que les moteurs sont anglophone, any way! Certes, mais les « outils webmaster » de Google permettent d’identifier au scalpel près l’information d’une page type. Si au moins elle représentait un véritable pied de page, mais non! La balise <footer> peut s’employer partout. D’ailleurs chaque <section>, chaque <article> devrait avoir son <footer> sous peine d’un warning de la W3C!

Exemple

<section>
  
  <footer>
    <p>Dernière modification : <time datetime="2014-11-08 20:00">2014-11-08 20:00</time></p>
  </footer>
</section>

<article>
  
  <footer>
    <p>Auteur Oznog</p>
  </footer>
</article>

<footer> dans une figure

Question de bien mélanger le tout, une citation à l’intérieur d’une figure ne doit pas utiliser <figcaption> mais <footer>!

Donc la balise <footer> peut s’utiliser à maintes reprises dans une page pour identifier la source relative à un contenu. À l’instar de <header>, <footer> est obligatoire dès qu’il y a plusieurs éléments (menu, copyright, retour en haut). On pourrait l’utiliser par exemple à l’intérieur de la balise <figure> (voir l’exemple ci-contre) :

<figure>
  <blockquote>
    Question de bien vous mélanger,
    une citation (cite) à l’intérieur d’une
    figure ne doit pas utiliser figcaption!
    mais footer!
  </blockquote>
  <footer>
    - <cite class="title">Trucsweb.com</cite>
    par <cite class="author">Oznog</cite>.
  </footer>
</figure>

C’est donc un court tutoriel, le résumé suffit à lui seul. En fait le job se fait en CSS pour lui donner un...sens. Comme dans le bon vieux temps alors (?) (Sticky Footer, Footer Under, absolute bottom...)

Ah j’oubliais, les coordonnées, souvent affichées dans le pied de page, doivent être dans une balise <address>, toujours très sémantiques ;-) Mais on trouve aussi ailleurs cet exemple tout aussi éloquent :

<section>
  
  <footer>Dernière modification : 2001-04-23</footer>
  <address>Auteur: Oznog</address>
</section>

Compatibilité

Les nouveaux éléments de block HTML5 comme <footer> doivent être déclarés pour les vieux navigateurs.

  header, section, footer, aside, nav, main, article, figure {
    display: block;
  }

Connexion

Mot de passe perdu

Conditions générales

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

Trucsweb.com

HTML