What is the purpose of "role" attribute in HTML? - GeeksforGeeks (2024)

Skip to content

What is the purpose of "role" attribute in HTML? - GeeksforGeeks (1)

Last Updated : 01 Jul, 2024

Summarize

Comments

Improve

Suggest changes

Like Article

Like

Save

Report

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:

What is the purpose of "role" attribute in HTML? - GeeksforGeeks (3)

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.



Please Login to comment...

Similar Reads

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 resources from one domain to another domain. Basically,

2 min read

Describe the purpose of using alt attribute in &lt;img&gt; tag in HTML

The &lt;img&gt; 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 in the &lt;img&gt; tag. Syntax: &lt;img alt="text

1 min read

What is the purpose of the colspan attribute in a HTML Table ?

The colspan attribute in an HTML table is used to specify the number of columns a cell should span horizontally. It enables you to merge multiple adjacent table columns into a single cell, making it useful for creating tables with complex layouts or merging cells across multiple columns. The purpose of colspan is as follows: Combine Cells: The cols

1 min read

What is the Purpose of the Hidden Attribute in HTML?

The hidden attribute in HTML is used to indicate that an element is not yet, or is no longer, relevant or needed for the user interface. It effectively hides the element from view but does not remove it from the document structure. Note: The hidden attribute is a boolean attribute, meaning its presence alone is sufficient, and it doesn't require a

1 min read

What is the purpose of the alt attribute in the &lt;img&gt; Tag ?

The "alt" attribute in the &lt;img&gt; Tag is important for making websites more accessible. It stands for "alternative text" and is used to describe what an image is about. If the image can't load, this text shows up instead. It's also helpful for people who use screen readers because they can hear this description, making the web more inclusive f

1 min read

Difference between Web Role and Worker Role in Node.js

Web Role: Web Role is a Cloud Service role in Azure that is customized to run web-based applications developed by programming languages supported by IIIS (Internet Information Services) like we have Node JS. Worker Role: A worker role is any role in Azure that is customized to run applications in the background service processes along with Web Role

2 min read

How href attribute is different from src attribute in HTML ?

In HTML5, the href and src attributes play distinct roles in defining paths or URLs, each associated with specific HTML elements. The href attribute, commonly found in an anchor (&lt;a&gt;) elements, points to the destination of hyperlinks, facilitating navigation. The src attribute, used with elements like &lt;img&gt; and &lt;script&gt;, specifies

1 min read

What is the role of the src Attribute in &lt;img&gt; Tag ?

The src attribute in the &lt;img&gt; tag specifies the source URL or file path of the image to be displayed on the webpage. The browser needs to fetch and render the image correctly. Without a valid "src" attribute, the image would be missing or broken on the web page. Syntax&lt;img src="image-source-url" alt="alternative-text"&gt;Attribute ValuesI

1 min read

What is Description List &amp; what is the purpose of using it in HTML ?

A description list is a list of terms, with a description of each term. Lists in HTML are used for specifying particular information in list form. There are various types of Lists in Html such as Ordered Lists, Unordered Lists, and description Lists. In this article, we will discuss description lists in HTML. Description Lists are used for: It is u

2 min read

Explain the purpose of DOCTYPE in HTML

The DOCTYPE in HTML acts like a blueprint, telling web browsers how to understand and display a webpage. Here's why it matters: Defines Document Type: It tells browsers the type and version of HTML or XHTML used in the page.Controls Rendering Mode: It helps and influences how browsers render content, ensuring consistency across different browsers.E

1 min read

What is the purpose of the HTML "aria-*" attributes?

The HTML "aria-*" attributes, part of WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications), are used to enhance the accessibility of web content. These attributes provide additional information to assistive technologies, such as screen readers, in interpreting and presenting content to users with disabilities. Syntax&lt;b

1 min read

What is the purpose of implementing the Semantic Elements in HTML ?

Semantic HTML refers to the practice of using HTML elements that carry meaningful, descriptive names to convey the structure and meaning of content on a webpage. It's not only about the way things are presented, but it also emphasizes the significance of the content's message. It involves using appropriate semantic tags for different content, such

1 min read

When to use the class attribute and the id attribute ?

The class attribute is used when multiple HTML elements share a common style or behaviour, allowing the application of a shared style to several elements. It promotes code reusability and is suitable for elements with similar characteristics. The id attribute is utilized when a unique identifier is needed for a specific HTML element. This identifie

1 min read

How to use the target attribute and the rel attribute in the &lt;a&gt; Tag ?

The target and rel attributes in the &lt;a&gt; (anchor) tag is used to control the behaviour of hyperlinks, specifying how the linked content should be opened and establishing relationships between the current and linked documents. Here's how to use these attributes: target Attribute:The target attribute determines where the linked content will be

2 min read

HTML | &lt;html&gt; xmlns Attribute

The HTML &lt;html&gt; xmlns Attribute is used to specify the xml namespace for a document. Important Note: This attribute is mainly required in XHTML, not valid in HTML 4.01, and optional in HTML 5. Syntax: &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; Attribute Values: https://www.geeksforgeeks.org/ It defines the namespace to use (for XHTML d

1 min read

What is the purpose of self executing function in JavaScript?

The self-executing anonymous function is a special function which is invoked right after it is defined. There is no need to call this function anywhere in the script. This type of function has no name and hence it is called an anonymous function. The function has a trailing set of parenthesis. The parameters for this function could be passed in the

3 min read

What is the Purpose of base href Tag in Angular ?

In this article, we will see what is base href tag in Angular, along with understanding their basic implementation with the help of examples. Base href TagThe base href is important for generating correct routes, in -case you are deploying your project in a subfolder. The base href element has the angular router to compose the navigation URLs. The

2 min read

Explain the purpose of animate() method in jQuery

Then animate() method available in jQuery could be used for creating an interactive UI for our webpages. We use the animate() method to perform a custom animation of a set of CSS properties. The animate() method won't be able to animate string values, for example, we can't animate the "background-color" and such properties like that in regular jQue

3 min read

Explain the purpose of clearing floats in CSS

In this article, we will learn to clear float and the purpose of clearing floats in CSS. Before diving into this topic, we will know the float property in CSS. The float property in CSS is used to change the normal flow of an element. The float property defines where should be an element place container's left or right side. Purpose of clearing flo

2 min read

What is the purpose of module.exports in node.js ?

The module.exports is actually a property of the module object in node.js. module. Exports is the object that is returned to the require() call. By module.exports, we can export functions, objects, and their references from one file and can use them in other files by importing them by require() method. Purpose: The main purpose of module.exports is

3 min read

Explain the purpose of the ‘in’ operator in JavaScript

JavaScript in operator is used to check whether the data is within the object or in an array. In an object, the in operator works only on the key or property of the object. If the key or property exists then this operator returns true otherwise false. Similarly, for arrays, it will return true if we pass the index of the element not for a particula

2 min read

Explain the purpose of never type in TypeScript

The never type represents a wide range of type of values that never occur. This means that it could be the return type of a function that never returns a particular value. In this article, we will learn about the never type in TypeScript and why it is used. Syntax: // For variable const GFG : never; // For function function geeks(): never { const g

3 min read

What is the purpose of .media-list class in bootstrap ?

In this article, we will learn the use of the '.media-list' class in Bootstrap. The .media-list class is one of the media object classes of bootstrap. The '.media' class is used to align or float the media items like audio, video, and images, While the '.media-list' class, is used when the media items are to be shown in the form of an unordered lis

4 min read

Explain the purpose of never type in TypeScript

In Typescript when we are certain that a particular situation will never happen, we use the never type. For example, suppose you construct a function that never returns or always throws an exception then we can use the never type on that function. Never is a new type in TypeScript that denotes values that will never be encountered. Example 1: The n

3 min read

What is the purpose of using SOAP ?

SOAP ( Simple Object Access Protocol) is a message convention that permits appropriated components of an application to convey. SOAP can be extended to an assortment of lower-level conventions, including the web-related Hypertext Transfer Protocol (HTTP). SOAP is an abbreviation for Simple Object Access Protocol. It is an XML-based informing conven

2 min read

What is the purpose of process object in Node.js ?

A process object is a global object available in the Node.js environment. It is globally available. We do not have to use the require() to import the module of the process object. The "process" object use to get current Node.js process details &amp; also give control over that process. Properties of the process object: Some of the commonly used Nod

2 min read

What is the purpose of using tsconfig.json file ?

tsconfig.json file is a file of JSON format which allows us to point the root level files and different compiler options to setup that require to compile a TypeScript based projects. The existence of this file in a project specifies that the given directory is the TypeScript project folder root. The tsconfig.json file mainly consists of the informa

2 min read

What is the second argument that can optionally be passed to setState and what is its purpose ?

The second argument that can optionally be passed to setState is a callback function which gets called immediately after the setState is completed and the components get re-rendered. If you want your program to update the value of a state using setState and then perform certain actions on the updated value of the state then you must specify those a

3 min read

Explain the purpose of render() in ReactJS

Render in React JS is a fundamental part of class components. It is used to display the component on the UI returned as HTML or JSX components. The ReactDOM.render() function takes two arguments, HTML code and an HTML element. Purpose of render()React renders HTML to the web page by using a function called render().The purpose of the function is to

2 min read

What is the purpose of callback function as an argument of setState event ?

In React, the purpose of callback function as an argument of setState event is to execute the code after the data in the state is modified. Purpose of callback function as an argument of setStateSetState is an asynchronous method. Asynchronous means that the remaining code will get executed while the current action is being performed. Whereas synch

2 min read

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

What is the purpose of "role" attribute in HTML? - GeeksforGeeks (5)

'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, check: true }), success:function(result) { jQuery.ajax({ url: writeApiUrl + 'suggestions/auth/' + `${post_id}/`, type: "GET", dataType: 'json', xhrFields: { withCredentials: true }, success: function (result) { $('.spinner-loading-overlay:eq(0)').remove(); var commentArray = result; if(commentArray === null || commentArray.length === 0) { // when no reason is availaible then user will redirected directly make the improvment. // call to api create-improvement-post $('body').append('

'); $('.spinner-loading-overlay').show(); jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id, }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.unlocked-status--improve-modal-content').css("display","none"); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); return; } var improvement_reason_html = ""; for(var comment of commentArray) { // loop creating improvement reason list markup var comment_id = comment['id']; var comment_text = comment['suggestion']; improvement_reason_html += `

${comment_text}

`; } $('.improvement-reasons_wrapper').html(improvement_reason_html); $('.improvement-bottom-btn').html("Create Improvement"); $('.improve-modal--improvement').hide(); $('.improvement-reason-modal').show(); }, error: function(e){ $('.spinner-loading-overlay:eq(0)').remove(); // stop loader when ajax failed; }, }); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); } else { if(loginData && !loginData.isLoggedIn) { $('.improve-modal--overlay').hide(); if ($('.header-main__wrapper').find('.header-main__signup.login-modal-btn').length) { $('.header-main__wrapper').find('.header-main__signup.login-modal-btn').click(); } return; } } }); $('.left-arrow-icon_wrapper').on('click',function(){ if($('.improve-modal--suggestion').is(":visible")) $('.improve-modal--suggestion').hide(); else{ $('.improvement-reason-modal').hide(); } $('.improve-modal--improvement').show(); }); function loadScript(src, callback) { var script = document.createElement('script'); script.src = src; script.onload = callback; document.head.appendChild(script); } function suggestionCall() { var suggest_val = $.trim($("#suggestion-section-textarea").val()); var array_String= suggest_val.split(" ") var gCaptchaToken = $("#g-recaptcha-response-suggestion-form").val(); var error_msg = false; if(suggest_val != "" && array_String.length >=4){ if(suggest_val.length <= 2000){ var payload = { "gfg_post_id" : `${post_id}`, "suggestion" : `

${suggest_val}

`, } if(!loginData || !loginData.isLoggedIn) // User is not logged in payload["g-recaptcha-token"] = gCaptchaToken jQuery.ajax({ type:'post', url: "https://apiwrite.geeksforgeeks.org/suggestions/auth/create/", xhrFields: { withCredentials: true }, crossDomain: true, contentType:'application/json', data: JSON.stringify(payload), success:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-section-textarea').val(""); jQuery('.suggest-bottom-btn').css("display","none"); // Update the modal content const modalSection = document.querySelector('.suggestion-modal-section'); modalSection.innerHTML = `

Thank You!

Your suggestions are valuable to us.

You can now also contribute to the GeeksforGeeks community by creating improvement and help your fellow geeks.

`; }, error:function(data) { jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Something went wrong."); jQuery('#suggestion-modal-alert').show(); error_msg = true; } }); } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Minimum 5 Words and Maximum Character limit is 2000."); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } } else{ jQuery('.spinner-loading-overlay:eq(0)').remove(); jQuery('#suggestion-modal-alert').html("Enter atleast four words !"); jQuery('#suggestion-modal-alert').show(); jQuery('#suggestion-section-textarea').focus(); error_msg = true; } if(error_msg){ setTimeout(() => { jQuery('#suggestion-section-textarea').focus(); jQuery('#suggestion-modal-alert').hide(); }, 3000); } } document.querySelector('.suggest-bottom-btn').addEventListener('click', function(){ jQuery('body').append('

'); jQuery('.spinner-loading-overlay').show(); if(loginData && loginData.isLoggedIn) { suggestionCall(); return; } // load the captcha script and set the token loadScript('https://www.google.com/recaptcha/api.js?render=6LdMFNUZAAAAAIuRtzg0piOT-qXCbDF-iQiUi9KY',[], function() { setGoogleRecaptcha(); }); }); $('.improvement-bottom-btn.create-improvement-btn').click(function() { //create improvement button is clicked $('body').append('

'); $('.spinner-loading-overlay').show(); // send this option via create-improvement-post api jQuery.ajax({ url: writeApiUrl + 'create-improvement-post/?v=1', type: "POST", contentType: 'application/json; charset=utf-8', dataType: 'json', xhrFields: { withCredentials: true }, data: JSON.stringify({ gfg_id: post_id }), success:function(result) { $('.spinner-loading-overlay:eq(0)').remove(); $('.improve-modal--overlay').hide(); $('.improvement-reason-modal').hide(); $('.create-improvement-redirection-to-write').attr('href',writeUrl + 'improve-post/' + `${result.id}` + '/', '_blank'); $('.create-improvement-redirection-to-write')[0].click(); }, error:function(e) { $('.spinner-loading-overlay:eq(0)').remove(); var result = e.responseJSON; if(result.detail.non_field_errors.length){ $('.improve-modal--improve-content .improve-modal--improve-content-modified').text(`${result.detail.non_field_errors}.`); jQuery('.improve-modal--overlay').show(); jQuery('.improve-modal--improvement').show(); $('.locked-status--impove-modal').css("display","block"); $('.unlocked-status--improve-modal-content').css("display","none"); $('.improve-modal--improvement').attr("status","locked"); $('.improvement-reason-modal').hide(); } }, }); });

What is the purpose of "role" attribute in HTML? - GeeksforGeeks (2024)
Top Articles
I Need a Payday Loan But Why Am I Getting Refused?
Valorant's Community Perspectives: Comparing 'Smurfs' to Cheaters
Ohio Houses With Land for Sale - 1,591 Properties
Somboun Asian Market
Top Scorers Transfermarkt
Craigslist Mpls Mn Apartments
Google Jobs Denver
Santa Clara College Confidential
How To Get Free Credits On Smartjailmail
Words From Cactusi
Craigslist In Fredericksburg
Www Thechristhospital Billpay
Elden Ring Dex/Int Build
Over70Dating Login
LeBron James comes out on fire, scores first 16 points for Cavaliers in Game 2 vs. Pacers
Tripadvisor Near Me
Restaurants Near Paramount Theater Cedar Rapids
Craigslist Farm And Garden Tallahassee Florida
Ally Joann
Uta Kinesiology Advising
Georgetown 10 Day Weather
Myhr North Memorial
Knock At The Cabin Showtimes Near Alamo Drafthouse Raleigh
How to Watch Every NFL Football Game on a Streaming Service
Maine Racer Swap And Sell
Expression&nbsp;Home&nbsp;XP-452 | Grand public | Imprimantes jet d'encre | Imprimantes | Produits | Epson France
Abga Gestation Calculator
Reserve A Room Ucla
Tim Steele Taylorsville Nc
Craigs List Jax Fl
Tgh Imaging Powered By Tower Wesley Chapel Photos
Roto-Rooter Plumbing and Drain Service hiring General Manager in Cincinnati Metropolitan Area | LinkedIn
Obsidian Guard's Skullsplitter
Greater Keene Men's Softball
Elgin Il Building Department
KM to M (Kilometer to Meter) Converter, 1 km is 1000 m
Duff Tuff
Oriellys Tooele
Craigslist En Brownsville Texas
How To Upgrade Stamina In Blox Fruits
SF bay area cars & trucks "chevrolet 50" - craigslist
Bustednewspaper.com Rockbridge County Va
2013 Honda Odyssey Serpentine Belt Diagram
Matt Brickman Wikipedia
Gonzalo Lira Net Worth
Evil Dead Rise - Everything You Need To Know
Sleep Outfitters Springhurst
Game Akin To Bingo Nyt
Zom 100 Mbti
Glowforge Forum
Taterz Salad
Palmyra Authentic Mediterranean Cuisine مطعم أبو سمرة
Latest Posts
Article information

Author: Prof. An Powlowski

Last Updated:

Views: 6456

Rating: 4.3 / 5 (44 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Prof. An Powlowski

Birthday: 1992-09-29

Address: Apt. 994 8891 Orval Hill, Brittnyburgh, AZ 41023-0398

Phone: +26417467956738

Job: District Marketing Strategist

Hobby: Embroidery, Bodybuilding, Motor sports, Amateur radio, Wood carving, Whittling, Air sports

Introduction: My name is Prof. An Powlowski, I am a charming, helpful, attractive, good, graceful, thoughtful, vast person who loves writing and wants to share my knowledge and understanding with you.