How do I mark up a page with more than one main-content candidate?

Ask which region expresses the page’s central topic or, for an application, its central function. The <main> element represents that dominant content. Its contents should be unique to the document rather than repeated site material such as navigation, sidebars, logos, or copyright information—unless that material is actually the page’s main function. [S1]

For your example, if the page is an article, the article body is the likely candidate. The related-links sidebar supports the article, and the site navigation helps visitors move around; neither becomes main just because it is useful. This is a decision about each region’s role, not its visual size or position.

Usually, treat those as parts of the same main content region when they all contribute to the same page topic. Mark the encompassing region as <main>, then keep the article’s internal structure inside it. You do not need to make every important subsection a separate main region.

For example, a page with a site header, article, related-links sidebar, and footer could be organized like this:

<header>
  <nav aria-label="Site">...</nav>
</header>
<main>
  <article>
    <h1>Preparing for a team handoff</h1>
    <p>Introduction...</p>
    <section>
      <h2>What to include</h2>
      <p>...</p>
    </section>
    <p>Conclusion...</p>
  </article>
</main>
<aside>
  <h2>Related guides</h2>
  ...
</aside>
<footer>...</footer>

The ellipses are placeholders, not complete page content. The example illustrates one choice: a single region encloses the page’s central material, while navigation, related links, and the footer remain outside it. The guidance supports the distinction between dominant, unique content and repeated material, but it does not prescribe a particular layout or require this exact arrangement. [S1]

First identify the dashboard’s central function for this page. If one panel carries out or presents that central function and the other is supporting context, use the former as the candidate for <main> and keep the supporting panel separate. If both panels contribute to one central dashboard function, they can both sit inside a single <main>; being separate panels does not by itself mean they need separate main elements.

Write a one-line purpose statement before changing the markup, such as: “This page lets the team review the current project.” Then ask which regions directly serve that purpose and which are repeated site furniture or supporting material. In this hypothetical example, the project panel and activity panel might both belong inside one main region if together they make up the dashboard’s central function. The exact choice depends on the page’s purpose; the guidance does not classify every dashboard panel. [S1]

Use a short content-first review:

1. State the page’s central topic or application function in one sentence.
2. Identify the region that contains the dominant content for that purpose.
3. Check whether proposed contents are unique to the page or are repeated navigation, branding, sidebar, or footer material. Keep repeated material out unless it is the page’s main function. [S1]
4. Review the document’s <main> elements. There should not be more than one unless the additional <main> element is hidden. [S1]
5. Recheck the result if the page purpose changes; a region’s role depends on what that page is for.

A useful note for a code review is: “Main region: [region]. Page purpose: [purpose]. Supporting regions kept outside: [regions].” This records the reasoning without suggesting that every page must use the same layout.