How to Add a Main Landmark So Visitors Can Skip to Your Content
A main element lets screen-reader users jump straight past your header and navigation to the real content. Here is how to add it without breaking your layout.
Reviewed by Jacob Rhinehart for Strelva's co-founder; products and operations lead responsibilities.
Screen readers offer a shortcut to jump straight to the main content of a page, but only if you tell them where it is. The <main> element marks the primary content region, the part that is unique to this page, as opposed to the header, navigation, and footer that repeat everywhere. Without it, a screen-reader user has to tab through your entire menu on every single page.
Why it matters
Imagine arriving on each new page and being forced to listen to the whole navigation again before reaching the article. The main landmark removes that, and it costs you one element.
Step by step
- Find the content wrapper. Identify the element that holds this page's unique content, not the header, nav, sidebar, or footer.
- Make it a main element. Change that wrapper's tag to <main>, or wrap the content in a <main>.
- Use only one per page. A page should have exactly one main landmark. Remove any extras from sidebars or widgets.
- Do not nest it wrongly. The main element should not sit inside the header or nav.
- Pair it with your skip link. Give it an id and a tabindex="-1" so a "skip to content" link can move focus into it.
- Confirm the layout is unchanged. Main is a plain block element like a div, so swapping the tag should not move anything visually.
If the layout shifts
If changing a div to main breaks styling, the cause is almost always a CSS rule targeting the div by tag name. Adjust the selector to target the id or class instead, and the layout returns while the accessibility win stays.
Frequently asked
What business owners ask next.
Can I have more than one main element?
No. Use exactly one main landmark per page, wrapping the primary content. Remove any extra main elements from sidebars or plugin widgets so the shortcut lands in the right place.
Will switching a div to main change how my page looks?
It should not. Main is a block-level element just like div. If styling breaks, a CSS rule is targeting the old div tag directly; change it to target the id or class instead.
How does main work with a skip link?
Give the main element an id and a tabindex of -1, then point your 'skip to content' link at that id. Activating the link moves keyboard focus straight into the main content.