1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: <header>
slug: Web/HTML/Element/header
tags:
- Element
- HTML
- Reference
- Web
translation_of: Web/HTML/Element/header
---
{{HTMLRef}}
L'**élément HTML `<header>`** représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.
{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}
<table class="properties">
<tbody>
<tr>
<th scope="row">
<dfn
><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
>Catégories de contenu</a
></dfn
>
</th>
<td>
<a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
>Contenu de flux</a
>,
<a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
>contenu tangible</a
>.
</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td>
<a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
>Contenu de flux</a
>
mais sans élément descendant qui soit {{HTMLElement("footer")}}
ou <code><header></code>
</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>
Tout élément acceptant du
<a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
>contenu de flux</a
>. Il est à noter qu'un élément <code><header></code> ne doit pas
descendre d'un élément {{HTMLElement("address")}},
{{HTMLElement("footer")}} ou d'un autre élément
<code><header></code>.
</td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>
{{ARIARole("group")}}, {{ARIARole("presentation")}}
</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
## Notes d'utilisation
L'élément `<header>` n'est pas une section de contenu et n'introduit donc pas de nouvelle section dans ls [structure](/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document). Cela dit, un élément `<header>` est généralement destiné à contenir l'en-tête de la section environnante (un élément `h1`-`h6`), mais ce **n'est pas** obligatoire.
### Usage historique
Bien que l'élément `<header>` ne fasse pas partie de la spécification HTML avant {{glossary("HTML5")}} , il existait de façon implicite depuis les premières versions. [En consultant le premier site web](http://info.cern.ch/), il était originellement utilisé comme l'élément `<head>`. À un moment donné, il a été décidé d'utiliser un nom différent. Cela a permis à `<header>` d'être libre de remplir un rôle différent par la suite.
## Attributs
Comme tous les éléments HTML, cet élément possède les [attributs universels](/fr/docs/Web/HTML/Attributs_universels).
## Exemples
### En-tête de page
#### HTML
```html
<header>
<h1>Titre principal</h1>
<img src="mdn-logo-sm.png" alt="MDN logo">
</header>
```
#### Résultat
{{EmbedLiveSample("En-tête_de_page","100%","200")}}
### En-tête pour un article
#### HTML
```html
<article>
<header>
<h2>La planète Terre</h2>
<p>Publié le <time datetime="2017-10-04">4 octobre 2017</time> par Jeanne Smith</p>
</header>
<p>Nous vivons sur une planète bleue et verte</p>
<p><a href="https://example.com/the-planet-earth/">Poursuivre la lecture…</a></p>
</article>
```
#### Résultat
{{EmbedLiveSample("En-tête_pour_un_article","100%","200")}}
## Spécifications
| Spécification | État | Commentaires |
| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
| {{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '<header>')}} | {{Spec2('HTML WHATWG')}} | |
| {{SpecName('HTML5 W3C', 'sections.html#the-header-element', '<header>')}} | {{Spec2('HTML5 W3C')}} | |
## Compatibilité des navigateurs
{{Compat("html.elements.header")}}
## Voir aussi
- Autres éléments liés à la section d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}
- [Plan et sections d'un document HTML5](/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document)
|
