Skip to content

Latest commit

 

History

History
98 lines (78 loc) · 1.32 KB

no-nested-landmark.md

File metadata and controls

98 lines (78 loc) · 1.32 KB
Raw

no-nested-landmark

✅ The extends: 'recommended' property in a configuration file enables this rule.

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