Semantic & Interactive

<main> Tag

The dominant content of the page — exactly one per page.

1One Main per Page

<main> wraps the unique content of the page (everything that is not site-wide header, nav, or footer). Use it once per document so screen readers can jump straight to it.

Example Code

css

<body>
  <header>...</header>
  <main>
    <h1>Article title</h1>
    <p>The unique page content.</p>
  </main>
  <footer>...</footer>
</body>

2Put the element in context

Main identifies the document’s dominant content rather than repeated site navigation or supporting footer links. Keep the active page’s main region clear and avoid introducing multiple unrelated main landmarks through nested components. A skip link can lead keyboard users directly to it.

3Practice with a small page

Create a page with repeated navigation outside a single main region. Add a visible-on-focus skip link that targets the main content ID. Test that the destination can receive focus and that the header does not obscure its beginning.

Finished reading?

Mark this topic as complete to track progress.

Next Topic