structure
<header>
Represents introductory content or a group of navigational aids for its nearest sectioning ancestor. Use it at the top of the page, or inside an <article> or <section> for that block's heading area.
<header><h1>Site title</h1></header>Common attributes
| Attribute | Purpose |
|---|---|
| class | Styling hook |
| id | Unique identifier |
| role | ARIA override (rarely needed) |
Examples
<header><h1>Utilko</h1><nav>...</nav></header>Top-of-page banner with logo and nav
<article><header><h2>Post title</h2><p>By Ada</p></header>...</article>Header scoped to an article
<header role="banner">...</header>Explicit banner landmark (implicit when at document root)
Gotcha
A
Related tags
<footer>
Represents a footer for its nearest sectioning ancestor — typically author info, copyright, or related links. Use it at the bottom of the page, or inside an <article>/<section> for a block-level footer.
<nav>
Marks a section of major navigation links, either within the site or the current page. Use for primary menus, breadcrumbs, and pagination — not for every group of links.
<main>
Contains the dominant content of the document's <body> — the content unique to this page, excluding site-wide headers, nav, sidebars, and footers. Use exactly one visible <main> per page.
<div>
Generic block-level container with no inherent semantic meaning, used to group content for styling or scripting. Reach for it only when no semantic element (section, article, nav, header) fits the content.
<span>
Generic inline container with no semantic meaning, used to style or script a run of text or inline content. Use it when semantic inline elements like <em>, <strong>, or <code> don't fit.