Service privé et distinct du Registre National du Commerce et des sociétés tenues par les greffiers des tribunaux de commerce. Informations fournies par le Groupement d’intérêt économique des greffiers des tribunaux de commerce (G.I.E. INFOGREFFE)

Header

Mise à jour 06/10/2025 Web

Header (en-tête) - définition et bonnes pratiques pour le web

Définition

Le header d'un site web désigne la zone placée en haut d'une page et destinée à présenter l'identité, la navigation principale et des éléments d'accès rapides. Techniquement, on parle souvent du bloc rendu par la balise HTML5 <header>, distinct de la balise <head> qui contient les métadonnées. Le header peut être statique, fixe (sticky) ou dynamique en fonction du design et du comportement attendu.

Rôles et objectifs

Le header poursuit plusieurs objectifs essentiels pour l'expérience utilisateur et la performance commerciale d'un site :

  • Identification : affichage du logo et du nom de la marque pour orientation immédiate de l'utilisateur.
  • Orientation : présentation des rubriques principales via un menu de navigation clair.
  • Conversion : intégration de boutons d'appel à l'action (CTA) comme "S'inscrire", "Contact", ou le panier sur un site e-commerce.
  • Confiance : contact rapide, icônes de sécurité ou mentions légales visibles en cas de besoin.
  • Accessibilité : prise en charge du clavier et des aides techniques (aria-labels, rôle de navigation) pour les utilisateurs en situation de handicap.

Éléments constitutifs

Un header complet contient en général :

  • Le logo (avec alternative textuelle pour l'accessibilité).
  • La barre de navigation principale (menu, mega-menu ou icône hamburger sur mobile).
  • Un ou plusieurs CTA visibles (inscription, démo, abonnement).
  • Les composants spécifiques au contexte - ex : panier et suivi sur un site e-commerce, barre de recherche sur un site média.
  • Indications de langue, profil utilisateur ou accès au compte si nécessaire.

Aspects techniques et bonnes pratiques

Concevoir un header efficace implique plusieurs considérations techniques :

  • Responsive design : prévoir des variantes pour mobile, tablette et desktop (menu hamburger, menu déroulant, priorité d'affichage).
  • Performance : réduire le poids du logo (SVG ou image optimisée) et limiter les scripts exécutés dans le header pour ne pas bloquer le rendu initial.
  • Accessibilité : utiliser des balises sémantiques (<header>, <nav>), attributs aria et gestion du focus pour la navigation au clavier.
  • SEO : bien que le header n'impacte pas directement le référencement comme le <head>, la structure et la clarté du menu favorisent l'exploration (crawl) et la compréhension du site par les moteurs.
  • Comportement UX : décider entre un header fixe (sticky) qui reste visible lors du scroll et un header rétractable pour maximiser l'espace de lecture.

Cas pratiques et exemples

Exemples concrets :

  • Site e-commerce : header comportant logo à gauche, recherche centrale, icônes de favoris et panier à droite avec compteur d'articles. Le panier doit être accessible et mis à jour dynamiquement via JavaScript sans rechargement complet.
  • Blog ou média : header simplifié avec logo, menu de rubriques et barre de recherche visible, puis CTA pour abonnement à la newsletter.
  • Application B2B : header compact avec logo, sélection de compte/projet et accès rapide aux notifications et paramètres utilisateur.

Checklist de validation

  • Logo avec texte alternatif et lien vers la page d'accueil.
  • Menu accessible (focus visible, ordre logique, labels clairs).
  • CTA prioritaires immédiatement visibles et testés sur mobile.
  • Performances mesurées (LCP, First Contentful Paint) et scripts minimisés.
  • Tests d'accessibilité et d'utilisabilité réalisés (clavier, lecteurs d'écran).

En synthèse, le header est une zone stratégique alliant identité, navigation et conversion. Bien conçu, il guide, rassure et facilite l'action ; mal conçu, il casse l'expérience et nuit aux objectifs du site.