Main content



Superclass Role:

  • landmark

Inherited States and Properties:

  • aria-atomic
  • aria-busy (state)
  • aria-controls
  • aria-describedby
  • aria-disabled (state)
  • aria-dropeffect
  • aria-expanded (state)
  • aria-flowto
  • aria-grabbed (state)
  • aria-haspopup
  • aria-hidden (state)
  • aria-invalid (state)
  • aria-label
  • aria-labelledby
  • aria-live
  • aria-owns
  • aria-relevant

Name From:

  • author

A region that contains mostly site-oriented content, rather than page-specific content.

The banner role is assigned to the portion of the page which contains the site-specific content rather than a page-specific content. Usually the portion of the page that includes logo, navigation panel and the search functionality together are marked with role="banner". A banner usually appears at the top of the page and typically spans the full width. Take care that no more than one element is marked as role="banner" in the page.

User agents should treat elements with the role of banner as navigational landmarks.

Note: Because document and application elements can be nested in the DOM, they may have multiple banner elements as DOM descendants, assuming each of those is associated with different document nodes, either by a DOM nesting (e.g., document within document) or by use of the aria-owns attribute.


<div role="banner">Header , navigation and search sections form a banner region </div>
More in this category: « button article »