Page layout

What do layout elements change if they look the same as divs?

Elements like header, nav, main, aside and footer render as plain blocks. Browsers give them display: block and nothing else, so a page built with them looks identical to one built with divs until you add CSS.

The difference shows up in the accessibility tree. Several of these elements map to landmark roles: banner, navigation, main, complementary, contentinfo, search and region. Screen reader users can list landmarks and jump between them, the way a sighted visitor glances at a page and spots the menu or the footer. In NVDA and JAWS the D key moves to the next landmark, and VoiceOver on macOS lists them in the rotor.

Browser reader modes and extensions also use these elements to find the main text and skip the chrome. Search engines read them as hints about which part of the page is the content, though they do not rank you higher for using them.

The goal is a small set of landmarks that matches what a visitor sees: a header, a navigation block, the main content, perhaps a sidebar, and a footer. Five or six landmarks are easy to scan. Twenty are noise.

<body>
  <header>…logo and site name…</header>
  <nav aria-label="Main">…</nav>
  <main>
    <h1>Spring plant sale</h1>
    …
  </main>
  <aside aria-label="Opening hours">…</aside>
  <footer>…</footer>
</body>

When do header and footer become landmarks?

A header that is a direct part of the page body becomes the banner landmark. A footer in the same position becomes contentinfo. These usually hold the logo, site name, main navigation, copyright line, contact details and legal links.

When you put a header or footer inside an article, aside, main, nav or section, it stops being a page-level landmark. It becomes the header or footer of that piece of content, such as a blog post's title and date or a recipe's author line. That nesting is valid and useful. You can have one page header and a header in every article.

Neither element has to contain a heading, though a page header usually holds the site name. Do not put a header inside a footer or the other way round; the content model forbids it.

<article>
  <header>
    <h2>Growing tomatoes on a balcony</h2>
    <p>By Priya, <time datetime="2026-04-12">12 April 2026</time></p>
  </header>
  <p>…</p>
  <footer><a href="/tags/vegetables">More vegetable posts</a></footer>
</article>

What belongs in main, and how many can I have?

The main element wraps the content that is unique to this page: the article, the product, the search results. Repeated parts like the site header, navigation and footer stay outside it. Screen reader users jump straight to main to skip everything that repeats on every page, and a skip link like <a href="#content">Skip to content</a> pointing at it helps keyboard users do the same.

A document may have only one visible main. You can include more than one in the source only when all but one have the hidden attribute, which single-page apps sometimes do for views that swap in and out.

The main element must not sit inside article, aside, footer, header or nav. In practice it sits directly in body or inside a layout div, and that is fine.

When should I use nav, and when search?

Use nav for major blocks of navigation links: the site menu, a table of contents, breadcrumb trails, pagination. A list of three links in a footer about privacy and terms does not need it; the footer landmark already covers it.

When a page has more than one nav, give each a label with aria-label or aria-labelledby. Screen readers then announce "Main navigation" and "Breadcrumb navigation" instead of two identical "navigation" landmarks. Do not include the word navigation in the label, because the role is already announced.

The search element is newer and wraps a search or filter feature. It maps to the search landmark, which used to need role="search" on a form. Put the form inside it. The element is supported in all current browsers; older ones treat it as an unknown inline element, so add search { display: block; } if you still care about them.

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/plants/">Plants</a></li>
    <li><a href="/plants/ferns/" aria-current="page">Ferns</a></li>
  </ol>
</nav>

<search>
  <form action="/search">
    <label for="q">Search plants</label>
    <input id="q" name="q" type="search">
    <button>Search</button>
  </form>
</search>

Should this be an article or a section?

Use article for content that would make sense on its own if you lifted it out and put it somewhere else: a blog post, a product card, a forum reply, a news story, a comment. A useful test is whether it could appear in an RSS feed or be shared by itself.

Use section for a themed chunk of a larger whole that has its own heading: "Opening hours", "Ingredients", "Reviews". A section without a heading is almost always a wrapper that should be a div.

The two nest freely. A recipe page can be one article containing sections for ingredients and method. A list of blog posts can be a section called "Latest posts" containing several articles.

A section only becomes a region landmark when it has an accessible name, usually aria-labelledby pointing at its heading. Unnamed sections are ignored in the landmark list, which is a good thing. Name a section only when it is a major area someone would want to jump to.

<section aria-labelledby="latest">
  <h2 id="latest">Latest posts</h2>
  <article>
    <h3><a href="/posts/ferns">Ferns for shady corners</a></h3>
    <p>Five ferns that cope with north-facing gardens.</p>
  </article>
</section>

What counts as an aside?

The aside element holds content related to the surrounding content but separate from its main flow: a sidebar of opening hours, a box of related links, a glossary note, a pull quote. If you removed it, the main text would still make sense.

At page level, aside becomes the complementary landmark. Inside an article, it is a side note for that article. Give a page-level aside a label when there is more than one.

Do not use aside for content you want to hide from the main reading flow for layout reasons, like a cookie banner or an advert slot that has nothing to do with the page. Ads are better in a plain div or a labelled section so they do not pose as related content.

Do headings still matter if I use these elements?

Yes. Screen reader users navigate by headings even more than by landmarks. Older versions of the spec described an outline algorithm where nested sections reset heading levels, so every section could start with an h1. No browser or screen reader ever implemented it, and the HTML Standard removed it in 2022.

Write your heading levels as if sectioning elements did not exist. One h1 for the page topic, h2 for the main parts, h3 inside those, without skipping levels. The layout elements describe regions; the headings describe the structure inside them.

Some browsers once gave an h1 inside section a smaller default font size. That behaviour is being removed, and an h1 nested in sections now uses the same default size as one at the top level. Set heading sizes in your own CSS.

How do I check the landmarks on a page?

Open Chrome or Edge DevTools, select an element, and look at the Accessibility pane. Turn on the full-page accessibility tree to see every landmark and its name. Firefox's Accessibility Inspector shows the same tree, and has a checker for missing labels.

For a quick screen reader test, turn on VoiceOver with Cmd+F5 on a Mac, open the rotor with VO+U and switch to Landmarks. On Windows, NVDA's Elements List (Insert+F7) does the same. Listen for duplicates with no labels, a missing main, and landmarks that wrap the wrong content.

When reading AI-generated layout code, look for these patterns:

• section used as a generic wrapper for grid or flex containers, with no heading.
• Every block wrapped in article, including the page header.
• Two visible main elements, one per column.
• Several nav elements with no aria-label.
• role="banner" or role="navigation" added to elements that already have those roles, which is redundant.
• Heading levels reset to h1 inside each section.

Field notes

• Layout elements look like divs but give the page named landmarks.
• The main element holds the content unique to this page.
• Use nav for major blocks of navigation links.
• Use article for content that makes sense on its own.

Easy to get wrong

A section is for a themed part with a heading. A box that exists only for CSS should be a div.

A page has one visible main region. Split its content with sections or articles instead.

Two unnamed navigation landmarks sound identical to a screen reader user. A short label tells them apart.

The outline algorithm that allowed an h1 in every section was never implemented. Screen readers read these as two top-level page titles.

A page-level header already has the banner role. Adding it again is redundant and validators flag it.

Questions people ask

Do semantic elements affect how the page looks?

No. Browsers give them almost no default styling beyond display: block. They change meaning and accessibility, and you style them with CSS like any other element.

Can a page have more than one header or footer?

Yes. Each article or section can have its own header and footer. Only the ones directly in the body become the page banner and contentinfo landmarks.

Should I use section or div?

Use section when the block is a themed part of the page with its own heading. Use div when you only need a wrapper for styling or scripting.

Is the search element supported?

Yes, <search> is supported in all current major browsers. Older browsers treat it as an unknown element that still displays its contents.

Is the search element safe to use now?

Yes. Every current major browser supports it and exposes the search landmark. If you must support very old browsers, add search { display: block; } in CSS.

Do I need a skip link if I use main?

Screen reader users can jump to main already, but sighted keyboard users cannot. A skip link that appears on focus helps them past long navigation.