Purpose and content model
Landmarks describe the main regions of a page so readers can navigate by purpose. Main identifies dominant content. A page-level header introduces the site or page; footer provides closing information. Nav groups a major navigation block, while search groups controls and results associated with searching or filtering.
Header and footer are contextual: those inside an article or section introduce or conclude that section rather than automatically becoming the page's banner and content-information landmarks. Keep one visible main for the current document. A set of a few incidental links does not always need a separate nav.
Syntax and working example
<a href="#main">Skip to content</a>
<header><p>Reading room</p></header>
<nav aria-label="Main"><a href="/">Home</a> <a href="/books/">Books</a></nav>
<main id="main"><h1>New books</h1><p>This month’s collection.</p></main>
<footer><p>Contact the library team.</p></footer>Supported attributes and behavior
These elements use global attributes rather than special layout attributes. IDs provide skip-link targets. Give multiple navigation regions distinct accessible names with aria-label or aria-labelledby when necessary. Search supplies semantics for a search region, but a form inside it still needs its own correctly labeled fields and submission behavior. CSS controls grids, columns, and sticky positions; landmark names do not create a layout automatically.
Another practical pattern
<search>
<form action="/search/" method="get">
<label for="q">Search books</label><input id="q" name="q" type="search">
<button>Search</button>
</form>
</search>Accessibility and browser notes
Native landmark elements reduce the need for redundant ARIA roles. Keep their source order understandable and provide a visible skip link. Check search-element support against your target browser and assistive-technology combinations; a familiar-looking box does not prove a landmark is announced.
Common mistakes
Do not place several visible main elements on one page or wrap every footer link list in its own navigation landmark. A landmark should help the reader understand a significant region rather than increase the number of stops without purpose.
Verify your implementation
Use landmark navigation in a screen reader and make sure each region is distinguishable. Test the skip link with a keyboard and ensure the target is not hidden by a sticky header. Read the document with CSS disabled to inspect the logical order.
Standard status and sources
Standard; browser availability must be checked independently of specification status.