Exemples d'en-têtes de site web à modifier et copier
Exemples d'en-têtes de site web
Exemples d'en-têtes de site : 10 designs en direct en HTML et CSS | We.Inc
10 designs d'en-têtes de site originaux à modifier en direct : dispositions logo et navigation, placement du CTA, en-têtes sticky, menus mobiles sans JavaScript, plus une checklist d'en-tête.
L'en-tête d'un site web est la bande en haut de chaque page qui contient le logo, la navigation principale et généralement un bouton d'action. Un bon en-tête garde cinq à sept liens, place à gauche le logo qui renvoie à l'accueil, et se replie en un menu bien libellé sur téléphone. Voici dix designs d'en-têtes originaux avec du code modifiable.
Dispositions d'en-tête et quand les utiliser
Disposition
Idéal pour
Points de vigilance
Logo à gauche, liens à droite
La plupart des sites d'entreprise
Trop de liens qui repoussent le CTA hors de l'écran
Logo à gauche, liens au centre, CTA à droite
Sites SaaS et de services
Demande assez de largeur ; repliez plus tôt
Logo centré, liens en dessous
Boutiques, restaurants, sites éditoriaux
Un en-tête plus haut occupe plus d'écran
Barre utilitaire au-dessus de la barre principale
Commerces locaux qui vivent du téléphone
Deux barres sur mobile ; fusionnez-les
Barre compacte sticky
Pages longues
Elle masque les cibles d'ancre et le contenu
Les galeries d'en-têtes montrent généralement des images. Ici, ce sont de vrais en-têtes fonctionnels, construits en HTML et CSS simples avec des marques inventées : vous pouvez redimensionner le cadre, modifier le code et copier la version qui convient à votre site.
Filtrez les exemples par disposition, ou faites défiler les dix.
Modifiez le code de n'importe quel exemple ; le cadre isolé se redessine pendant que vous tapez.
Copiez le HTML et le CSS, puis remplacez le logo, les liens et le texte du bouton par les vôtres.
Passez la checklist en fin de page avant de publier.
Placez les liens dans un élément nav doté d'un aria-label, et signalez la page en cours avec aria-current="page".
L'élément header ne compte comme repère banner de la page que s'il ne se trouve pas dans article, aside, main, nav ou section.
Un en-tête sticky a besoin d'une valeur top, comme top: 0, sinon position: sticky se comporte comme relative.
Ajoutez scroll-margin-top aux titres quand l'en-tête est sticky, pour que les liens d'ancre ne cachent pas le titre sous la barre.
Gardez chaque zone tactile à au moins 24 par 24 pixels CSS pour respecter la taille de cible WCAG 2.2 au niveau AA ; 44 pixels est plus confortable.
Questions fréquentes
Que doit contenir l'en-tête d'un site web ?
Le logo avec un lien vers la page d'accueil, la navigation principale et, pour la plupart des sites d'entreprise, un bouton principal comme Réserver ou Demander un devis. Les commerces locaux ajoutent souvent un numéro de téléphone. Laissez de côté tout ce dont les visiteurs n'ont pas besoin sur chaque page.
Quelle hauteur doit avoir l'en-tête d'un site ?
Il n'y a pas de règle fixe. Environ 56 à 80 pixels est courant pour une seule barre sur ordinateur, et moins sur téléphone. Un en-tête sticky doit être aussi bas que possible, car il couvre du contenu en permanence.
Peut-on créer un menu mobile sans JavaScript ?
Oui. Un élément details avec un summary comme bouton de menu ouvre et ferme les liens nativement et fonctionne au clavier. L'exemple 6 de cette page utilise cette approche. Un bouton en JavaScript avec aria-expanded vous donne plus de contrôle sur l'animation et la fermeture.
L'en-tête doit-il être sticky ?
Sur les pages longues où l'on a souvent besoin du menu ou du CTA, un en-tête sticky compact aide. Sur les pages courtes, il prend surtout de la place. Si vous en utilisez un, gardez-le fin et vérifiez que les liens internes à la page arrivent bien en dessous.
Placement du logo, de la navigation et du CTA
Les visiteurs cherchent le logo en haut à gauche et s'attendent à ce qu'il les ramène à l'accueil : respectez cette convention, sauf si votre marque a une vraie raison de le centrer. Placez le bouton d'action tout à droite, là où l'œil termine sa lecture de la barre.
Classez les liens selon ce dont les visiteurs ont le plus besoin, pas selon votre organigramme. Services et tarifs passent généralement avant À propos.
Les en-têtes sur téléphone
En dessous d'environ 768 pixels, la plupart des rangées de liens ne tiennent plus. Repliez-les derrière un bouton Menu clairement libellé et gardez le CTA principal visible à côté, car c'est le seul lien qui mérite sa place.
Testez à 375 pixels de large. Si quelque chose défile horizontalement, raccourcissez les libellés ou repliez plus tôt.
Checklist de l'en-tête de site
À vérifier avant de publier
Vérification
Pourquoi
Le logo renvoie à la page d'accueil
Le comportement d'en-tête le plus attendu
Les liens sont dans un nav libellé
Les lecteurs d'écran l'annoncent comme navigation
Page en cours signalée avec aria-current
Indique au visiteur où il se trouve
Un seul bouton principal, au style distinct
Rend l'action principale évidente
Le bouton de menu a un libellé texte visible
Une icône seule passe facilement inaperçue
Contour de focus visible sur chaque lien
Les utilisateurs du clavier voient où ils sont
Aucun défilement horizontal à 375 px
C'est sur téléphone que les en-têtes cassent en premier
Les barres sticky ne masquent pas les cibles des ancres
Corrigez avec scroll-margin-top
1. Classique : logo à gauche, liens et bouton à droite
La disposition d'entreprise par défaut. Le bouton est le dernier élément, donc le point d'arrivée de la lecture.
2. Trois zones : logo, liens centrés, CTA
Courant sur les sites de logiciels. Une grille garde les liens parfaitement centrés, quelle que soit la largeur du logo.
3. Logo centré avec les liens en dessous
Convient aux boutiques et restaurants où le nom de la marque est la vedette. Les liens passent sur une deuxième ligne sur les écrans étroits.
4. Barre utilitaire avec numéro de téléphone au-dessus de la barre principale
Pour les commerces locaux qui vivent des appels : le numéro est un vrai lien tel: pour que les téléphones puissent le composer.
5. En-tête sticky compact
Faites défiler dans le cadre. position: sticky avec top: 0 garde la barre visible ; le fond translucide reste lisible par-dessus le contenu.
6. Menu mobile avec details et summary, sans JavaScript
Le summary est le bouton Menu ; le navigateur gère l'ouverture, la fermeture et le clavier. Les grands écrans affichent les liens en ligne.
7. En-tête sombre avec recherche
Le champ de recherche a un libellé masqué visuellement, pour que les lecteurs d'écran l'annoncent quand même.
8. En-tête transparent sur une section hero
L'en-tête repose sur la couleur du hero. Gardez un contraste de texte d'au moins 4.5:1 par rapport à ce qui se trouve derrière.
9. En-tête de boutique avec barre d'annonce
Une courte ligne d'annonce au-dessus de la barre porte une seule offre ; le nombre d'articles du panier est dans le texte du lien pour être lu à voix haute.
10. En-tête mobile qui garde le CTA visible
Sur téléphone, les liens se replient mais le bouton de réservation reste à côté du menu, car c'est l'action qui compte.