23. Pied de page

Un pied de page signale aux utilisateurs que la fin du site est atteinte. Il fournit également souvent un résumé avec des liens utiles vers d’autres domaines et fonctionnalités. Selon la complexité d’un site web, le pied de page peut souvent présenter des éléments secondaires, moins importants et moins pertinents pour la majorité des utilisateurs. La navigation principale reste ainsi simplifiée et épurée.

Voici des exemples typiques de contenu de bas de page :

Logo
Plan du site (lien vers un aperçu des principaux domaines)
Coordonnées
Liens vers le support, les questions fréquemment posées (FAQ), la politique de confidentialité, etc.
Liens vers des contenus secondaires (par exemple, À propos de nous, Emplois, etc.).
Liens vers les médias sociaux
Textes et liens pour l’optimisation des moteurs de recherche (SEO)
Paramètres des pays et des langues
Référence au droit d’auteur
Appel à l’action (appel à l’interaction, par exemple pour s’abonner à un bulletin d’information)

Apple Footer Pied de page sur apple.com (à partir de 2020)

Note

Bien sûr, ce ne sont là que des exemples. Il n’y a pas de recommandation définitive sur la manière dont un pied de page doit être. Les sites web qui contiennent de grandes quantités d’information (par exemple, les journaux, Instagram, etc.) n’utilisent souvent pas de pied de page, car les nouveaux contenus sont présentés sans cesse au fur et à mesure que vous les faites défiler. Il est donc peu probable que la “fin du site” puisse être atteinte.

:hammer_pick: Tâches de balisage du pied

Comme votre portefeuille est assez simple et que beaucoup des éléments énumérés ci-dessus sont déjà représentés sur la page elle-même, le modèle se passe d’un pied de page détaillé. Seule une référence au droit d’auteur et la possibilité de vous contacter par courrier électronique sont suggérées. Bien entendu, vous pouvez également vous écarter du modèle et inclure d’autres contenus dans votre pied de page.

    <!-- Insérer après la fermeture </main> et avant la fermeture `</body> tag-->
    <footer>
      &copy; Jane Doe &nbsp;|&nbsp; <a href="mailto:hello@janedoe.com">hello@janedoe.com</a>
    </footer>

Note

Remplacez le nom et l’adresse électronique du modèle par vos propres informations.

:hammer_pick: Tâches de styles de pieds

Même si votre “pied de page” n’est qu’une simple ligne de texte, il a besoin de certains styles pour ressembler au modèle.

    /* 
    --------------------------------
    <pied> section
    --------------------------------
    */
    
    footer {
    	padding: 2em 0;
    	text-align: center;
    }

Relever les défis

#10 Smooth Scrolling (Faire défiler la page “en douceur” en cliquant sur un élément de navigation)
#11 Back to top (Ajouter un bouton pour faire défiler “en douceur” le haut de la page).