Gebruiksopmerkingen
Wanneer het niet genest is binnen sectioning content, <main>, of een element met dezelfde ARIA-rol als de impliciete ARIA-rol van deze elementen, heeft het <header>-element dezelfde betekenis als de sitebrede banner-landmarkrol. Het definieert een globale sitekop, die meestal een logo, bedrijfsnaam, zoekfunctie en mogelijk de globale navigatie of een slogan bevat. Deze bevindt zich doorgaans bovenaan de pagina.
In andere gevallen, wanneer het genest is binnen de genoemde elementen, verliest het zijn landmarkstatus en vertegenwoordigt het een groep inleidende of navigatiehulpmiddelen voor de omringende sectie. Het bevat meestal de heading van de omringende sectie (een h1–h6-element) en een optionele subheading, maar dit is niet verplicht.
Historisch gebruik
Het <header>-element bestond oorspronkelijk al helemaal aan het begin van HTML, voor headings. Het is te zien op de allereerste website. Op een gegeven moment werden headings <h1> tot en met <h6>, waardoor <header> vrij kwam om een andere rol te vervullen.
Attributen
Dit element bevat alleen de globale attributen.
Toegankelijkheid
Het <header>-element definieert een banner-landmark wanneer de context ervan het <body>-element is.
Wanneer het is geplaatst binnen een <article>, <main>, <section>, <nav>, <aside>, of een element met dezelfde ARIA-rol als de impliciete ARIA-rol van deze elementen, heeft het <header>-element in plaats daarvan de generic-rol, en wordt het niet langer als landmark beschouwd. In dat geval kan het niet worden gelabeld met aria-label of aria-labelledby.
Voorbeelden
Paginakop
<header>
<h1>Main Page Title</h1>
<img src="logo.png" alt="logo" />
</header>Resultaat
Artikelkop
<article>
<header>
<h2>The Planet Earth</h2>
<p>
Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
Jane Smith
</p>
</header>
<p>
We live on a planet that's blue and green, with so many things still unseen.
</p>
<p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>Resultaat
Technische samenvatting
| Contentcategorieën | Flow content, palpable content. |
|---|---|
| Toegestane content |
Flow content, maar zonder <header>- of
<footer>-afstammeling.
|
| Weglaten van tag | Geen, zowel de begin- als de eindtag zijn verplicht. |
| Toegestane ouders |
Elk element dat
flow content accepteert. Merk op dat een <header>-element geen
afstammeling mag zijn van een <address>-,
<footer>- of ander
<header>-element.
|
| Impliciete ARIA-rol |
banner, of
generic
als het een afstammeling is van een
article, aside, main, nav of
section-element,
of een element met de rol
article,
complementary,
main,
navigation
of
region
|
| Toegestane ARIA-rollen |
group, presentation of
none
|
| DOM-interface | HTMLElement |