no-nested-landmark.md

no-nested-landmark

Landmark elements should not be nested within landmark elements of the same name.

List of elements & their corresponding roles

• header (banner)
• main (main)
• aside (complementary)
• form (form, search)
• main (main)
• nav (navigation)
• footer (contentinfo)

Examples

This rule forbids the following:

<main>
  <main></main>
</main>

<main>
  <div>
    <main></main>
  </div>
</main>

<div role="main">
  <main></main>
</div>

<div role="main">
  <div>
    <main></main>
  </div>
</div>

<main>
  <div role="main"></div>
</main>

<main>
  <div>
    <div role="main"></div>
  </div>
</main>

<header>
  {{! the "header" tag is equivalent to the "banner" role }}
  <div role="banner"></div>
</header>

This rule allows the following:

<div><main></main></div>

<main></main>

<div role="application">
  <div role="document">
    <div role="application"></div>
  </div>
</div>

<header>
  <nav>
  </nav>
</header>

References

• HTML Sectioning Elements
• Landmark Roles