Using the banner role

Description

A banner role represents general and informative content frequently placed at the beginning of the page. This usually includes a logo, company name, search icon, photo related to the page, or slogan.

By default, the HTML5 <header> element has an identical meaning to the banner landmark, unless it is a descendant of <aside>, <article>, <main>, <nav>, or <section>.

Possible effects on user agents and assistive technology 

No information

Note: Opinons may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.

Examples

Example 1

Simple banner:

<div role="banner">
  <h1>Title<h1>
  Subtitle
</div>

Notes

  • Each page may contain banner landmark, and, if so, should contain only one.
  • The banner landmark should be a top-level landmark.
  • When a page contains nested document and/or application roles (e.g. typically through the use of <iframe> and <frame> elements), each document or application role may have one banner landmark.
  • If a page includes more than one banner landmark, each should have a unique label.

ARIA attributes used

Compatibility

TBD: Add support information for common UA and AT product combinations

Additional resources

Document Tags and Contributors

Contributors to this page: thenoelman, chrisdavidmills, Dzordzu, BenoitL, Sheppy, hhillen
Last updated by: thenoelman,