Semantics

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

Additional info from the ARIA specification

Site-oriented content typically includes things such as the logo or identity of the site sponsor, and a site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.

Assistive technologies SHOULD enable users to quickly navigate to elements with role banner. user agents SHOULD treat elements with role banner as navigational landmarks. user agents MAY enable users to quickly navigate to elements with role banner.

The author SHOULD mark no more than one element on a page with the banner role.

Abstract Role

  • LandmarkRepresents a top-level section of a page, relevant to a specific purpose, that a user may want to scan for quickly and could appear in a site map or table of contents.

Content Categories

  • Flow ContentAn element that structures and organizes the body of a web document.

Allowed Descendants

Flow Children Allowed

No main, header, or footer element descendants allowed.

Usage

Allowed HTML elements

Implicit semantics

These elements have the role semantics by default, without needing to set the role attribute. Reach for elements with native semantics first when choosing how to implement a role in your content.

  • header

Explicitly allowed

  • section[role=banner]

Elements that can have any role

  • abbr[role=banner]
  • address[role=banner]
  • b[role=banner]
  • blockquote[role=banner]
  • canvas[role=banner]
  • cite[role=banner]
  • code[role=banner]
  • custom-element[role=banner]
  • data[role=banner]
  • del[role=banner]
  • dfn[role=banner]
  • div[role=banner]
  • em[role=banner]
  • figure[role=banner]
  • i[role=banner]
  • ins[role=banner]
  • kbd[role=banner]
  • mark[role=banner]
  • output[role=banner]
  • p[role=banner]
  • pre[role=banner]
  • q[role=banner]
  • samp[role=banner]
  • small[role=banner]
  • span[role=banner]
  • table[role=banner]
  • tbody[role=banner]
  • tfoot[role=banner]
  • thead[role=banner]
  • time[role=banner]
  • u[role=banner]
  • var[role=banner]