Un header de site web (ou en-tête en français) se trouve en haut de chaque page et sert à quelques fins très importantes. Il fait plus que fournir un emplacement pour votre logo ; il fait partie d’une expérience utilisateur et d’une gestion de la relation client cohérente que tous les bons sites web partagent. La conception d’un header peut varier d’un site à l’autre, mais les caractéristiques essentielles qui déterminent la navigation et l’expérience d’un site restent les mêmes.
Cette section est généralement cohérente sur toutes les pages du site, mais certains designs donnent à la page d’accueil une apparence légèrement différente de l’en-tête afin d’attirer l’attention sur les zones du site qui sont à l’honneur.
Dans l’ensemble, un bon en-tête facilite la navigation sur votre site, établit votre marque et crée une expérience de navigation cohérente sur l’ensemble de votre site.
Header vs Head
Il est important de ne pas confondre un en-tête de page (header) avec une tête de page (head). Les termes sont presque identiques, mais l’un décrit une section de la page que les gens voient et avec laquelle ils interagissent, tandis que l’autre décrit une zone du code HTML de la page qui indique aux services tiers de quoi traite la page.
L’en-tête de la page est défini dans le code de la page avec les balises <head></head>. Tout ce qui se trouve entre ces balises détermine la façon dont les services tiers comme le moteur de recherche de Google, Twitter, Facebook et votre navigateur voient la page.
Les éléments communs dans les balises <head></head>
Les balises <head></head> comprennent (mais ne sont pas limités à) :
- Titre : il s’agit du titre du document HTML. Chaque page a son propre titre unique ;
- Style : c’est ici que sont définies les options de style qui affectent l’ensemble de la page. Par exemple, si vous souhaitez que le texte ait une certaine couleur, c’est ici que vous la définissez ;
- Meta : les méta-informations, telles que le titre d’une page web (note : différent de celui défini dans la balise titre), l’auteur et l’image présentée, aideront les réseaux de médias sociaux à afficher les liens vers cette page de la meilleure façon possible. Les informations sur les droits d’auteur, les mots clés et autres sont également stockées dans les balises meta. Ces informations sont également utilisées pour aider les moteurs de recherche à mieux cataloguer chaque page ;
- Lien : la balise de lien est utilisée pour désigner toute feuille de style externe que vous voulez faire charger dans la page ;
- Script : les JavaScripts côté client sont définis ici.