The <header> element marks the introductory area of a page. Think of it as the page’s hello: it commonly holds a site logo and title, with the title marked up as a heading such as <h1>. section 11.4
Using <header> gives that area a meaningful label instead of leaving it as an anonymous <div>. Semantic page elements help automated tools, including search crawlers and screen readers, interpret the content’s role. section 11.3 section 11.11
A small page header
Wrap the logo and page title in <header>: <header> <img src="/images/SD-logo.png" alt="Semantics Depot logo"> <h1>Semantics Depot</h1> </header> The image supplies the visual identity; the h1 supplies the main title. A little CSS can give the whole header a background color, so it reads as one visible page area. section 11.4 section 11.4
PLAY: A header can grow with the page without losing its job as the introduction:
- In a photo gallery, use a logo image and an h1 for the site title, then style the header as a centered Flexbox row. section 15.6
- In a portfolio, combine a logo, navigation area, and h1 inside the header. section 20.5
- Place a header at the top of a content-focused layout, with navigation immediately below it. section 11.1
<header> #1
<img src=”/images/SD-logo.png” alt=”Semantics Depot logo”>
<h1>Semantics Depot</h1>
</header> #1
See the smallest useful header: a logo image and an h1 nested inside the opening and closing <header> tags. section 11.4
REMEMBER: <header> is for introductory content. Navigation has its own semantic element, <nav>; the page’s unique content belongs in <main>. Clear labels make a layout easier for people and software to understand. section 11.11 section 15.6
