Initially, HTML role attribute was introduced in XHTML to mark the orientation and the function of a given content on a specified web page. Now desecrated, they are still used by HTML 5 to identify the exact function of a given element as part of its parent web application.

The HTML role attribute is necessary for Accessible Rich Internet Applications (WAI-ARIA) to deduct content roles defined by XML-based languages. Governed by specified protocols and formats working group, these role attributes have more uses than general cases.

Some of the well-used HTML role attributes are:

  1. Banner – Generally placed on top of the page, this section contains website-specific content such as logos, main page heading, a site-wide search tool or site navigation options.
  2. Complementary – A section of the website that is connected to the website but holds relevance even when separated from the main page content. Any portal which displays functions and complements the website’s content would fall in this category.
  3. Content info – Footnote information such as the website’s privacy policy, copyrights and other footnotes would fall into this category
  4. Main – The main document of the page pertaining to the central topic of the website
  5. Navigation – A collection of links which can be used to navigate to different parts of the website
  6. Note – Denotes content that relates to the main content of the resource
  7. Search – A search form used to find content inside the site

Several of these role attributes overlap the new HTML5 elements directory, but functions such as ‘main’ provide a purpose for which HTML5 does not contain any element.

Additional role attributes

These role attributes are necessary when the languages used do not define their own set of such roles. Similarly, ARIA consists of a number of additional role attributes which define various additional purposes which can be given to an element. Some of them include:

  • Widget roles such as alert, button, dialog, radio etc.
  • Landmark roles such as banner, search, main etc.
  • Document structure roles such as article, group, separator etc.


While defining your own set of role attributes is possible with much-advanced languages used now, this technique is more or less likely to become redundant in a few years.

Leave a Reply

Your email address will not be published. Required fields are marked *