Main & Aside (<main>, <aside>) — HTML

<main> and <aside>

<main> and <aside> describe two opposite roles: the content the page exists to show you, and content that's related but not essential. Getting both right materially improves how assistive technology users navigate your page.

<main> — The Primary Content

<main> wraps the content that is unique to this page—the actual reason a visitor is here. There should be exactly one visible <main> per page, and it must not be nested inside <header>, <footer>, <nav>, or <aside>.

main.html

HTML

<body>
  <header>...</header>

  <main id="main-content">
    <h1>Understanding the Box Model</h1>
    <p>Every element in CSS is a box...</p>
  </main>

  <footer>...</footer>
</body>

<main> as a Skip-Link Target

Keyboard users tab through every link in your header and navigation before reaching the real content—on every single page. A "skip to content" link that jumps straight to <main> fixes this, and it's one of the most impactful accessibility additions you can make.

skip-link.html

HTML

<body>
  <a class="skip-link" href="#main-content">Skip to main content</a>

  <header>
    <nav><!-- lots of links --></nav>
  </header>

  <main id="main-content">
    <h1>Page Title</h1>
    ...
  </main>
</body>

The skip link is usually visually hidden until it receives keyboard focus, at which point it becomes visible so sighted keyboard users can see and use it too.

Only one <main> per page

Having more than one visible <main> confuses assistive technology, which expects exactly one "main landmark" to jump to. If you're building a single-page app that swaps views, keep a single <main> and replace its contents instead of adding more.

<aside> — Tangentially Related Content

<aside> marks content that's related to what's around it, but could be removed without harming the main point—think sidebars, pull quotes, "related articles" lists, or advertisement blocks.

aside-sidebar.html

HTML

<main>
  <article>
    <h1>A Beginner's Guide to Regex</h1>
    <p>Regular expressions describe patterns in text...</p>
  </article>

  <aside aria-label="Related articles">
    <h2>You might also like</h2>
    <ul>
      <li><a href="/string-methods">JavaScript String Methods</a></li>
      <li><a href="/validation">Form Validation Basics</a></li>
    </ul>
  </aside>
</main>

<aside> as a Pull Quote

pull-quote.html

HTML

<article>
  <p>The article body continues here with several paragraphs of text...</p>

  <aside>
    <blockquote>
      "Semantic HTML is the foundation accessibility is built on."
    </blockquote>
  </aside>

  <p>...and the article continues after the pull quote.</p>
</article>

Element	Role	Count per page
<main>	The primary, unique content of the page	Exactly one
<aside>	Tangential content: sidebars, pull quotes, related links, ads	Zero or more

Give a repeated <aside> a label

If a page has more than one <aside> (a sidebar and a pull quote, say), add aria-label to each so screen reader users can tell them apart when jumping between landmarks.

An aside doesn't have to be a sidebar visually

The name suggests a sidebar, but <aside> is defined by its relationship to the surrounding content, not by CSS placement. A full-width "related posts" block at the bottom of an article is still an appropriate <aside>.

Styling the Skip Link

A skip link should be invisible until it receives keyboard focus, then appear clearly. A common CSS pattern positions it off-screen by default and slides it into view on :focus.

skip-link-css.html

HTML

<style>
  .skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #111827;
    color: #fff;
    padding: 8px 16px;
    z-index: 100;
  }
  .skip-link:focus {
    top: 0;
  }
</style>

<a class="skip-link" href="#main-content">Skip to main content</a>

<main> With role="main" for Legacy Support

Modern browsers and screen readers understand <main> natively, but a small number of very old assistive technology combinations only recognized the ARIA role="main". Adding it explicitly is a harmless, belt- and-suspenders touch some teams still include.

main-role.html

HTML

<main role="main" id="main-content">
  <h1>Page Title</h1>
</main>

Aside Alongside a Sidebar Layout

sidebar-layout.html

HTML

<div class="layout">
  <main>
    <h1>Latest News</h1>
    <article>...</article>
    <article>...</article>
  </main>

  <aside aria-label="Sidebar">
    <section>
      <h2>Popular Tags</h2>
      <ul>
        <li><a href="/tags/react">React</a></li>
        <li><a href="/tags/css">CSS</a></li>
      </ul>
    </section>

    <section>
      <h2>Newsletter</h2>
      <form>
        <label for="email">Email</label>
        <input id="email" type="email" name="email" />
        <button type="submit">Subscribe</button>
      </form>
    </section>
  </aside>
</div>

The outer <div class="layout"> here is purely a CSS grid/flex wrapper—it has no thematic meaning of its own, so a plain <div> is the right choice, while <main> and <aside> correctly mark the two meaningfully different regions inside it.

Exactly one <main> per page, holding the content unique to that page.
A "skip to main content" link improves keyboard/screen-reader navigation dramatically.
<aside> marks tangentially related content: sidebars, pull quotes, related links, ads.
Label multiple <aside> elements with aria-label so they’re distinguishable as landmarks.