What is the purpose of "role" attribute in HTML?

What is the purpose of "role" attribute in HTML?

Last Updated : 01 Jul, 2024

The main purpose of the role attribute is to bolster ARIA i.e. Accessible Rich Internet Applications which helps in providing richness and quality from a semantic perspective. Moreover, role attribute makes a website more facilitative, and using this attribute is considered a good practice. Generally, the role is necessary for languages that do not define their role attribute.

Example: The example below shows the "role" attribute in HTML.

html

<!DOCTYPE>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>
        Output of Role Attribute
    </title>
    <style>    
        h2 {
            text-align: center;
        }
    </style>
</head>

<body role="document">
    <h2>Understanding usage of "Role" Attribute</h2>
</body>

</html>

Output:

ii1 — Output

Note: The output doesn't show any significant thing to notice. This shows that even if the role attribute is not used in the code, then also it won't affect our code and output. By using role attributes, we get to avail features like accessibility, device adaptation, server-side processing, complex data description, and many more such features. Thus role attribute is advised to be used for getting better performance of the code.

What is the purpose of "role" attribute in HTML?

P

Palash Sharma

Improve

Article Tags :

Similar Reads

What is the rule attribute in HTML Table ?

This is an HTML attribute, that is used to specify which parts of the inside borders should be visible. The HTML rule attribute is applicable on table tags. The <table> rules attribute is not supported by HTML 5. Syntax: <table rules="value"> Attributes: This attribute accepts 5 values a

What is the purpose of crossorigin Attribute in HTML ?

As we know that HTML introduces many elements and attribute that have some definition and specification that will be used for the enhancement of web development. In this article, we will learn how to use crossorigin attributes in HTML. The purpose of crossorigin attribute is used to share the resour

What is the use of integrity attribute in HTML ?

In this article, we will learn the purpose of using the integrity attribute in HTML & will also understand its implementation through an example. HTML introduced a new attribute called "integrity". The purpose of the integrity attribute is used to give permission to the browser to check the fetc

What is dir Attribute in HTML ?

This is an HTML attribute that is used to specify the text direction of the element content. HTML dir attribute is a global attribute that means it can be applied on any HTML tags for the direction of the element. Syntax: <element dir = "ltr | rtl | auto"> Attribute Value: This attribute conta

What is the difference between properties and attributes in HTML?

HTML is the standard language for creating documents that are intended to be displayed on web browsers. It is very usual to get confused with attributes and properties while performing DOM object manipulation in JavaScript. Before learning about the differences, let us first define the Document Obje

What is the use of asterisk (*) selector in CSS ?

The asterisk (*) selector in CSS, known as the universal selector, is used to target and apply styles to all elements on a webpage, regardless of their type or hierarchy. It's especially useful for global styling, such as resetting margins or applying uniform properties across the document.For examp

Describe the purpose of using alt attribute in <img> tag in HTML

The <img> alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image. It is also very much helpful in the Google ranking of your page. In this article, we will discuss the alt attribute

HTML input value Attribute

The HTML input value attribute defines the initial value of an <input> element, such as text fields, checkboxes, or radio buttons. It sets the default content or state for the input before user interaction or form submission.It has different meanings for different input types: The "button", "r

HTML link rel Attribute

The <link> rel attribute is an essential part of HTML that specifies the relationship between the current document and a linked document or resource. It is used in conjunction with the href attribute to define how the two documents relate to each other.Syntax: <link rel="value" href="URL"

Which Inline Attribute Specifies the Styling of Elements in HTML?

An inline attribute in HTML refers to the style attribute, which allows you to apply CSS directly to a specific element. This provides quick, element-specific styling without affecting other elements or requiring external stylesheets. It is defined directly within the HTML tag.What is the style Attr