💼 This rule is enabled in the 📋 template-lint-migration config.
Disallows nesting landmark elements of the same type.
Landmark elements should not be nested within other landmarks of the same name. This creates confusion for screen reader users navigating by landmarks.
This rule disallows nesting landmark elements or roles within other landmark elements or roles of the same type.
Landmark elements include:
<header>(banner)<nav>(navigation)<main>(main)<aside>(complementary)<footer>(contentinfo)<section>(region)<form>(form)- Elements with landmark roles
- header (banner)
- main (main)
- aside (complementary)
- form (form, search)
- main (main)
- nav (navigation)
- footer (contentinfo)
Examples of incorrect code for this rule:
<template>
<nav>
<nav>Nested navigation</nav>
</nav>
</template><template>
<main>
<main>Nested main</main>
</main>
</template><template>
<div role="navigation">
<nav>Nested nav</nav>
</div>
</template>Examples of correct code for this rule:
<template>
<nav>Navigation</nav>
<main>Content</main>
</template><template>
<main>
<nav>Navigation inside main</nav>
</main>
</template><template>
<main>
<div>Regular content</div>
</main>
</template>