<header>
An introduction to a page or section: logo, title, navigation, author info.
- Display
- block
- Closing tag
- Required
- Permitted content
- Flow content without
<header>and<footer>elements
Example
#<header>
<a href="/">CodeWorlds</a>
<nav aria-label="Main">
<a href="/courses">Courses</a> ·
<a href="/docs">Docs</a> ·
<a href="/collections">Collections</a>
</nav>
</header>Definition and usage
#The <header> element holds introductory content. At the whole-page level, that’s usually a logo, the site name, and the main navigation. Inside an <article> or <section>, it’s a title, a publish date, an author, or a short lead.
A single page can have multiple <header> elements, one for each section or article. It can’t, however, sit inside a <footer>, an <address>, or another <header>.
A page header placed directly inside <body> is recognized by assistive technology as a "banner" landmark. The same element nested inside an article no longer plays that role.
Syntax
#<header>
…
</header>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
More examples
#<article>
<header>
<h2>Flexbox in 10 minutes</h2>
<p>Author: Marta Nowak · <time datetime="2026-05-02">May 2, 2026</time></p>
</header>
<p>Flexbox lays out elements along one dimension: in a row or in a column.</p>
</article>Default CSS
#Most browsers display this element with these default styles:
header {
display: block;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#<header>isn’t the same as<head>. The latter holds metadata and isn’t displayed on the page.- A header alone isn’t enough as a section’s title. You still need an
<h1>-<h6>inside it.
Related entries
#- <header> vs <head><head> is an invisible section holding the page’s metadata, one per document. <header> is a visible introductory element, and a page can have several.
- <footer>A page or section’s footer: author, copyright, links, contact info.
- <nav>A block of primary navigation links: a menu, a table of contents, breadcrumbs.
- <main>The page’s main, unique content. Only one should be visible per page.
- <article>Self-contained content that makes sense read or shared on its own.
Spotted a mistake or missing an example? Write to us.