Aller au contenu

La balise <header>

La balise <header> permet de structurer sémantiquement l'en-tête d'une page ou d'une section.

  • Elle est généralement utilisée pour l'en-tête général d'un site.

  • La balise <header> possède une balise ouvrante et une balise fermante :

    <header> et </header>.

Bonnes pratiques

Il est recommandé :

  • d'utiliser <header> pour regrouper le contenu introductif d'une page ou d'une section ;
  • de privilégier les éléments HTML sémantiques plutôt que des
    lorsque ceux-ci décrivent mieux la fonction du contenu ;
  • de placer le logo, le nom du site et les informations générales du site dans le
    principal lorsque cela est pertinent ;
  • d'utiliser CSS pour modifier l'apparence visuelle du
    plutôt que d'utiliser des éléments HTML uniquement pour leur apparence ;

head ou header

Ne pas confondre <header> avec <head> :

<head> contient les métadonnées du document, tandis que <header> contient du contenu visible et sémantique destiné à la page.

SEO

La balise

contribue à la structure sémantique d'une page HTML. Elle permet aux navigateurs, aux outils d'assistance et aux moteurs de recherche de mieux comprendre l'organisation du contenu.

Exemples

En-tête d'une page 

    <header>
        <h1>Mon site Web</h1>
        <img src="logo.png" alt="Logo de mon site Web">
    </header>

Dans cet exemple, le <header> contient les informations générales qui introduisent le site : le titre et le logo.

⚠️ À ne pas confondre

<header> et <head>

Ces deux balises ont des fonctions très différentes.

<head> contient les métadonnées du document, comme le titre de la page, les feuilles de style et certaines informations utilisées par le navigateur.

    <head>
        <meta charset="UTF-8">
        <title>Mon site Web</title>
        <link rel="stylesheet" href="style.css">
    </head>

<header>, quant à lui, contient du contenu introductif destiné à la page ou à une section.

    <header>
        <h1>Mon site Web</h1>
        <p>Bienvenue !</p>
    </header>