Footer

Le pied de page : le logo avec les années, celui qui a fait le site, et les liens qui s'appliquent à tout le site.

Sur cette page

Playground

Depuis

Fond

HTML

<footer class="feitio-footer"><div class="inner"><span class="who"><strong>Feitio</strong><span>© <span data-since="2026">2026</span></span></span><ul><li><a href="#playground">Changements</a></li><li><a href="#playground">Licence MIT</a></li><li><a href="#playground">GitHub</a></li></ul></div></footer>

Quand l'utiliser

À la fin de chaque page d'un site de documentation ou institutionnel.

Quand ne pas l'utiliser

Sur un écran de travail : ce qui va dans le pied de page ira dans le pied de page du Drawer.
En tant que deuxième menu, répété sur chaque page.

Exemples

Pied de page

La marque et les années à gauche ; les liens à droite. Sur mobile, l'un sous l'autre.

Afficher le code

HTML

<footer class="feitio-footer">
  <div class="inner">
    <span class="who">…<strong>Feitio</strong> © <span data-since="2026">2026</span></span>
    <ul><li><a href="/mudancas">Mudanças</a></li>…</ul>
  </div>
</footer>

Les années

L'année provient de l'attribut data-since : alors qu'il s'agit de la même année, elle affiche seulement cela ("2026") ; lorsque l'année change, elle affiche la plage ("2026–2027"), toute seule, sans que personne ne la modifie.

Anatomie

Qui : la marque, le nom et les années.
Liens : quelques-uns, ceux qui s'appliquent à tout le site.

C'est un <footer> : les lecteurs d'écran annoncent la région.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-footer"`	sur le `<footer>`	Le pied de page, avec la ligne fine en haut.
`data-since`	la première année	Affiche l'année ou la plage une fois que l'année tourne.