# Banner landmark should not be nested within another landmark. > Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/landmarks/banner-is-top-level > Attribution: Rocket Validator (https://rocketvalidator.com) > License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) The `banner` landmark identifies the site-oriented content at the top of a page, such as the site logo, title, and primary navigation. Screen reader users rely on landmarks to understand page structure and jump between major sections. When a `banner` landmark is nested inside another landmark like `main`, `nav`, `article`, `aside`, or `section`, it loses its meaning as a top-level region. Screen readers may not list it as a `banner` at all, or they may present a confusing hierarchy that makes it harder to navigate. In HTML, a `

` element that is a direct child of `` (not nested inside `

`, `

`, or `

`) automatically receives the `banner` role. When a `

` is placed inside one of these sectioning elements, the browser assigns it a generic role instead. Problems arise when a developer explicitly adds `role="banner"` to a header that is nested inside another landmark, creating a conflict between the DOM structure and the stated ARIA role. This rule relates to WCAG 2.2 Success Criterion 1.3.1 (Info and Relationships), Level A, which requires that information and relationships conveyed through presentation are programmatically determinable. A misplaced `banner` landmark misrepresents the page structure, making the programmatic relationships inaccurate. ## Who is affected Screen reader users navigate pages by listing available landmarks. A `banner` nested inside `main` or another sectioning element creates a confusing or broken landmark tree. Instead of seeing a clear top-level `banner`, users may encounter an unexpected hierarchy or miss the banner entirely. This makes it harder to locate site-wide content like the logo or global navigation. ## How to fix it There are two approaches depending on the intent: If the `

` is meant to be the site banner, move it outside of any sectioning landmark so it is a direct child of ``. A `

` at the top level automatically receives the `banner` role without needing an explicit `role="banner"` attribute. If the `

` is inside a sectioning element on purpose (for example, a header for an `

` or `

`), remove any explicit `role="banner"` from it. A header inside a sectioning element is just a local header for that section, not the page-level banner. ## Examples ### Incorrect: banner nested inside main The `role="banner"` is explicitly set on a `

` inside `

`, which nests the banner landmark inside the main landmark. ```html

Page content goes here.

``` ### Correct: banner as a top-level landmark The `

` is a direct child of ``, so it automatically has the `banner` role. No explicit `role` attribute is needed. ```html

My Website

Page content goes here.

``` ### Correct: section header without banner role When a `

` belongs to a specific `

`, it should not have `role="banner"`. Omitting the role lets the browser assign the correct generic role. ```html

My Website

Article title

Published on January 5, 2024

Article content goes here.

``` In this example, the outer `

` is the page banner and the inner `

` is scoped to its `

`. Neither needs an explicit `role` attribute because the browser determines the correct role based on context.