w3docs logo

Tag HTML <header>

Le tag <header> définit l'en-tête, “le chapeau” de la page ou de la section. Cette partie contient généralement un logo, un menu de navigation, un formulaire de recherche de site, etc.

Le tag <header> est un nouvel élément en HTML 5. Dans le document HTML on peut utiliser plusieurs éléments <header>, qui peuvent être situés dans n'importe quelle partie de celui-ci.

Il est interdit d'insérer le tag <header> à l'intérieur des éléments <footer> et <address>, ainsi qu'à l'intérieur d’un autre tag <header>.

Syntaxe

Le contenu du tag est écrit entre le tag ouvrant (<header>) et le tag fermant (</header>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      li {
        display: inline-block; 
        margin-right: 10px;
        color: #778899;
      }
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul style="padding:0;">
          <li>Accueil</li>
          <li>À propos</li>
        </ul>
      </nav>
      <h1>Bienvenue sur notre page</h1>
      <hr>
    </header>
    <article>
      <header>
        <h2>Le titre de la section</h2>
        <p>Le paragraphe de texte.</p>
      </header>
    </article>
  </body>
</html>

Résultat

Notre site

Attributs

Le tag <header> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <header> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <header>:

Coloration du texte dans le tag HTML <header>:

Styles de mise en page du texte pour la tag HTML <header>:

Autres propriétés utiles pour le tag HTML <header>:

Support de Navigateurs

chrome firefox safari opera
6+ 4+ 5+ 11.1+

Pratiquez vos connaissances

Qu'est-ce qui est exact à propos de la balise HTML <header> selon le contenu de la page Web spécifiée ?
Trouvez-vous cela utile?