Open In App

What are custom attributes in HTML5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

Custom attributes are attributes that are not part of the standard HTML5 attributes but are explicitly created. They allow us to add our information to HTML tags. These attributes store private information specific to a page or application, providing a way to add custom data to HTML elements

Any attribute whose name starts with data- is a custom attribute. The data-* attributes allow us to embed custom attributes on all HTML elements. These are completely ignored by the user. The data stored can be used in JavaScript of the page. We can also use these data attributes to style our elements.

Syntax:

<element data-*="value">

Two parts of the custom Attributes

Attribute Name

The attribute name must be at least one character long after the prefix “data-“. It should not contain any upper-case letters.

Attribute Value

The value to be stored can be any string.

Using getAttribute() and setAttribute() Method

HTML DOM getAttribute() can be used to get the stored data from the attribute. It will either return a null or an empty string if the asked attribute does not exist. HTML DOM setAttribute() can be used to modify the value of any existing attribute or to add a new attribute. 

Example: Implementation to show how to read the values of these attributes with JavaScript is quite simple.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML5 Custom attributes</title>
</head>
 
<body>
    <h3>Welcome To GFG</h3>
    <ul>
        <li onclick="showPosition(this)"
            id="geek1" data-position="winner">
            Geek1
        </li>
 
        <li onclick="showPosition(this)"
            id="geek2" data-position="runner up">
            Geek2
        </li>
 
        <li onclick="showPosition(this)"
            id="geek3" data-position="third">
            Geek3
        </li>
 
        <li onclick="showPosition(this)"
            id="geek4" data-position="lost">
            Geek4
        </li>
    </ul>
 
    <script src="custom_attributes.js"></script>
</body>
 
</html>


Javascript




// This JavaScript file will handle the custom
// attributes which will be accessed using getAttribute().
// We will use this to create an alert whenever a list item is clicked.
 
function showPosition(runner) {
    var position = runner.getAttribute("data-position");
    alert("The " + runner.innerHTML + " is " + position + ".");
}


Output:

Using getAttribute() and setAttribute() Method Example Output

Data Attribute Access with Dataset

This feature provides a DOMStringMap object that holds custom data attributes. Each attribute is related to a food list and has a “data-” prefix removed, transforming the attribute name into camelCase. To access these attributes, you can use the camelCase name as a key, like element.dataset.keyname or element.dataset[keyname]. When an item is clicked, the JavaScript specified in the onclick attribute will be triggered.

Example: Implementation to show another way of accessing data attributes is by using dataset property.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksForGeeks</title>
</head>
 
<body>
    <h3>Welcome To GFG</h3>
    <ul>
        <li onclick="handleFood(this)"
            data-food-type="fruit">
            Apple
        </li>
         
        <li onclick="handleFood(this)"
            data-food-type="vegetable">
            Potato
        </li>
         
        <li onclick="handleFood(this)"
            data-food-type="veg">
            Cabbage
        </li>
         
        <li onclick="handleFood(this)"
            data-food-type="non-veg">
            Chicken
        </li>
    </ul>
     
    <script src="custom_attributes.js"></script>
</body>
 
</html>


Javascript




// Whenever an item is clicked this code snippet
// will be triggered. Here we will alert the type of food
// that is stored in the custom attribute using the dataset property.
 
function handleFood(food) {
    var foodType = food.dataset.foodType;
    alert(food.innerHTML + " is " + foodType +".");
}


Output:

Data Attribute Access with Dataset Example Output

CSS Styling with Custom Attributes

Here, we can use attribute selectors to style the background color of the element.

Example: This example will set the background colors of the elements using the CSS.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
</head>
 
<body>
    <h2>Welcome To GFG</h2>
    <p data-about="blog">Informational text entries</p>
    <p data-info="blogathon">Blogathon 2021</p>
</body>
 
</html>


CSS




p[data-about='blog'] {
  background-color: #C2F784;
}
 
p[data-info='blogathon'] {
  background-color: #DF2E2E;
}


Output:

CSS Styling with Custom Attributes Example output

 



Last Updated : 08 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads