Landmarks and document outline
header, nav, main, aside, footer, section, article — the rooms a screen reader can jump between.
Every modern web page has the same rough shape: a strip across the top, a sidebar or menu, a chunk of main content, and a strip at the bottom. Sighted users see this shape instantly. Their eye picks out the header, the nav bar, the article in the middle, the footer.
Screen-reader users can't scan the page that way. Instead, their software offers a "jump to landmark" command — like a keyboard shortcut for "skip to main content". For that command to work, your HTML has to name those regions. The tags that do the naming are called landmark elements.
What a landmark is
A landmark is a region of the page big enough that someone navigating with assistive tech might want to jump to or skip past it. The HTML spec gives you a small set of tags whose only job is to mark these regions: <header>, <nav>, <main>, <aside>, <footer>, plus <section> and <article> when they have a name.
Every landmark element has a built-in role in the accessibility tree (covered in lesson 1). A screen reader can list all landmarks on the page — the user picks one and jumps straight there.
The picture is intentionally generic. Your page may have more or fewer regions, but the shape — name your regions, let users jump between them — is the same.
The six you'll use most
A short tour. Each is one tag, each replaces a <div> you might otherwise reach for.
<header>— introductory content for the page or a section. The site banner. Inside an<article>, the article's title and byline.<nav>— a major group of navigation links. The primary site menu, breadcrumbs, a table of contents. Not every list of links — a list of "related links" inside an article does not need a nav.<main>— the dominant content of the page. Skip-to-main-content links jump here. Use one per page.<aside>— content tangential to the main content. A sidebar of related articles, a pull quote, a "did you know" box. Not a footer; not a nav.<footer>— closing content for the page or a section. Site copyright and links at the bottom of the page. Inside an<article>, "tags: …, comments: …".<section>— a thematic grouping of content with its own heading. Becomes a landmark only if it has a name (a heading, oraria-label).
<body>
<header>
<h1>Daily Bread Bakery</h1>
<nav aria-label="primary">
<a href="/">Home</a>
<a href="/menu">Menu</a>
<a href="/visit">Visit</a>
</nav>
</header>
<main>
<article>
<h2>Sourdough season is back</h2>
<p>Our wild-yeast loaf returns next Friday...</p>
</article>
</main>
<aside aria-label="related">
<h2>Recent posts</h2>
<ul>...</ul>
</aside>
<footer>
<p>© 2026 Daily Bread Bakery</p>
</footer>
</body>The skeleton above is more than a layout — it is a labelled map. A screen-reader user can jump to "main" with one shortcut. They can list every nav and pick which one to enter (the aria-label="primary" lets them tell two <nav> elements apart). They can skip past the aside and the footer at any time.
When a page has more than one of the same landmark — two <nav>s, two <aside>s — give each an aria-label describing what it is ("primary", "site map", "related articles"). Without that, a screen reader announces them all as "navigation" and the user has no way to tell them apart.
section vs article
These two trip everyone up. They are different in a small but important way.
<article> is for a piece of content that could stand alone: a blog post, a news story, a product card on a listing page, a comment, a forum reply. The test: if you copied the contents into another site or an RSS feed, would they make sense on their own? If yes, it is an article.
<section> is a thematic grouping — a chapter of a larger document, a "specs" panel of a product page, a "what people are saying" block. The test: would you give it a heading? If yes, it is a section. If no, it is probably a <div>.
<!-- Each blog post is an article: it can stand alone. --> <article> <h2>Why we switched to ESLint flat config</h2> <p>Earlier this year...</p> </article> <!-- Inside the post, "Recommended reading" is a thematic section. --> <article> <h2>Why we switched to ESLint flat config</h2> <p>...</p> <section aria-labelledby="reading-h"> <h3 id="reading-h">Recommended reading</h3> <ul>...</ul> </section> </article>
Notice that <section> and <article> can nest in either direction. An <article> can contain multiple <section> children (chapters). A <section> can contain multiple <article> children (a "comments" section listing reply articles).
The mistake to avoid: using <section> as a generic wrapper. If your section has no heading and would not get one, it is a <div> in disguise — which is fine, just call it that.
One main per page
<main> is the only landmark with a hard rule: one per page, max. The reason is that "main" is the destination of the "skip to content" link a screen-reader user hits first. Two <main>s and the user's tooling does not know which one to land on.
<header> and <footer> have a softer rule: a page-level header and footer (one of each), plus headers and footers inside <article> and <section> elements. Inside an article, <header> is the title and byline; <footer> is the tags and comment count.
<header><!-- page header --></header>
<main>
<article>
<header>
<h2>Sourdough season</h2>
<p>by Maya — 12 March</p>
</header>
<p>The wild-yeast loaf returns...</p>
<footer>
<p>Tags: bread, fermentation</p>
</footer>
</article>
</main>
<footer><!-- page footer --></footer>The page has a header and footer. The article inside <main> also has its own header and footer. They do not collide because they belong to different elements.
Putting it together
You can build almost every page on the web using the same handful of landmarks: a <header> at the top, one or two <nav>s for the menus, a <main> holding articles or sections, an <aside> for the side rail, and a <footer> at the bottom.
When you reach for <div>, ask first: is this a region a screen-reader user might want to jump to? If yes, there is probably a landmark for it. If no — say, a <div> you only added so you could give it CSS padding — <div> is the right call. Lesson 7 of this course revisits exactly when a div is still the right tool.
Wrapping everything in landmarks is not better than wrapping nothing. If the page has 12 <nav> regions, the "list of navigations" command becomes useless. Aim for a handful of meaningful regions, not a wallpaper.
<nav> elements on a page: the main site menu, and a breadcrumb showing where you are in the hierarchy. A screen-reader user opens the landmarks list and sees "navigation" twice with no other detail. The fix is:<section><p>Lorem...</p></section> with no heading inside or any aria-label. What is the most accurate critique?