<header>

Dans la conception d'un site web, l'en-tête est souvent la première chose que vos visiteurs voient. La balise <header> vous permet de structurer cette section essentielle efficacement. Elle contient généralement des titres, des logos ainsi que des menus de navigation.

Structure et syntaxe de la balise <header>

Structure et syntaxe de base

La balise <header> est une balise qui va venir englober les éléments de l'entête de notre site internet. Elle va donc avoir :

• Une balise ouvrante <header> ;
• Ainsi qu'une balise fermante </header>.

Sa structure est très simple :

<header>
    <!-- Les éléments qui doivent apparaîtrent dans l'entête -->
</header>

Exemple d'utilisation

Prenons un exemple plus parlant :

<header>
  <h1>Titre principal</h1>
  <nav>
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">À propos</a></li>
    </ul>
  </nav>
</header>

Assez facile non ? 😉

Attributs

La balise <header> n’a pas d’attributs spécifiques à elle-même, mais elle peut utiliser tous les attributs globaux d’HTML, comme id, class, voir même style.

Bonnes pratiques

Pour une utilisation optimale de la balise <header>, respectez les recommandations suivantes :

Utilisez <header> pour introduire le contenu principal de votre site ou d'une section. Cela aide les moteurs de recherche et les lecteurs d'écran à comprendre la hiérarchie et la structure de votre page.

Évitez aussi d’utiliser plusieurs balises <header> au sein d’une même section, sauf si vous avez une structure très spécifique avec des sections clairement définies à l'intérieur (comme des articles avec leur propre en-tête).

N'hésitez pas à inclure d'autres balises comme <nav> pour les menus de navigation dans la balise <header> elle-même : cela ne pose aucun problème !

Différence avec d'autres balises similaires

• <main> : La balise <main> représente le contenu principal d’une page, alors que <header> est destiné à introduire ce contenu.
• <section> : La balise <section> regroupe des contenus thématiques. Si elle contient un en-tête, vous pouvez utiliser une balise <header> à l’intérieur.
• <footer> : Contrairement à <header>, <footer> est utilisée pour les informations de bas de page.

Compatibilité des navigateurs

La balise <header> est compatible avec tous les navigateurs modernes.