# The “banner” role is unnecessary for element “header”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/the-banner-role-is-unnecessary-for-element-header
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The HTML specification defines built-in semantic roles for many elements, and the `<header>` element is one of them. When a `<header>` is a direct child of `<body>` (or at least not nested inside a sectioning element), browsers and assistive technologies already interpret it as a `banner` landmark — the region of the page that typically contains the site logo, navigation, and other introductory content. Explicitly adding `role="banner"` duplicates what the browser already knows, which adds unnecessary noise to your markup.

This principle is part of the WAI-ARIA specification's guidance on using ARIA roles: the first rule of ARIA is "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state, or property to make it accessible, then do so." Redundant roles don't typically break anything, but they clutter the code, can confuse developers maintaining the project, and signal a misunderstanding of HTML semantics.

It's worth noting an important nuance: the `<header>` element only maps to the `banner` role when it is **not** a descendant of `<article>`, `<aside>`, `<main>`, `<nav>`, or `<section>`. When nested inside one of these sectioning elements, `<header>` has no corresponding landmark role — it simply serves as the header for that particular section. In that context, adding `role="banner"` would not be redundant; it would actually **change** the semantics, which is almost certainly not what you want.

To fix the warning, remove the `role="banner"` attribute from your `<header>` element. The native semantics are sufficient.

## Examples

### Incorrect: redundant `role="banner"` on `<header>`

This triggers the validator warning because `<header>` already implies the `banner` role at the top level:

```html
<header role="banner">
  <img src="logo.svg" alt="My Company">
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
```

### Correct: let `<header>` use its implicit role

Simply remove the `role="banner"` attribute:

```html
<header>
  <img src="logo.svg" alt="My Company">
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
```

### Correct: using `role="banner"` on a non-`<header>` element

If for some reason you cannot use a `<header>` element (e.g., working within a legacy CMS), applying `role="banner"` to a `<div>` is the appropriate way to convey the same landmark semantics:

```html
<div role="banner">
  <img src="logo.svg" alt="My Company">
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</div>
```

### A `<header>` inside a sectioning element has no `banner` role

When `<header>` is nested inside an `<article>` or other sectioning element, it does **not** carry the `banner` role. This is expected and correct — the `<header>` here simply introduces the article content:

```html
<article>
  <header>
    <h2>Article Title</h2>
    <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
  </header>
  <p>Article content goes here.</p>
</article>
```
