Menu
Semantic & Interactive
<header> & <footer>
Page or section header and footer landmarks.
1Landmark Regions
<header> and <footer> can wrap the whole page or a single article/section. Screen readers expose them as landmarks for quick navigation.
Example Code
css
<header>
<h1>Acme Blog</h1>
<nav>...</nav>
</header>
<article>
<header><h2>Post title</h2></header>
<p>Body...</p>
<footer>Posted by Sam</footer>
</article>
<footer>
<p>© 2026 Acme</p>
</footer>2Put the element in context
Headers and footers describe introductory and closing information for a page or section. Their meaning depends on where they appear. The site header is different from a short header inside an article, even if both use the same element name.
3Practice with a small page
Build a page header and footer, then add an article with its own introductory header. Read the structure without styles. Put publisher contact and policy links in the site footer only when those destinations are real and useful.
Finished reading?
Mark this topic as complete to track progress.