Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

HTML

HTML5

RDFFav

HTML5 : La balise Footer

Pour le document mais aussi par section. Encore une balise philosophique, oups, sémantique!

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>!
- Trucsweb.com par Oznog.

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;
  }


, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

8/10 sur 1 revues.
       Visites : 4511 - Pages vues : 4635
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

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.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte