The <header> element holds introductory content — usually a logo, site title, and navigation. It's not just for the top of the page; it can introduce any section or article.
Syntax & Example
<header>
<h1>CodingNow</h1>
<nav>
<a href="/">Home</a>
<a href="/cources">Courses</a>
</nav>
</header>Not Just for the Page Top
<article>
<header>
<h2>5 Tips for Learning Python</h2>
<p>Published on 12 August 2026</p>
</header>
<p>Start with the basics before jumping into frameworks...</p>
</article>Here, <header> introduces just this one article — its title and metadata — not the whole page. A page can have multiple <header> elements, one per section that needs one.
Accessibility
Screen readers expose <header> as a landmark (specifically, a banner role when it's a direct child of <body>), letting users jump straight to it. A <header> nested inside <article> or <section> does not get the banner role — it's scoped to that section instead, which is the correct, expected behavior.
Common Mistakes
- Confusing
<header>(a visible content section) with<head>(invisible page metadata) — see header vs head - Assuming there can only be one
<header>per page — there can be several, each scoped to its own section or article - Putting only a logo image with no heading — where possible, include a real heading element for better document outline and accessibility
Interview Relevance
"Can a page have more than one header element?" — yes, and explaining the article/section-scoped use case shows a deeper understanding than just "it's for the top of the page."
Practice Question
Add a <header> to a product card component containing the product name and price.
