Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are custom attributes in HTML5 ?

  • Last Updated : 16 Sep, 2021

Custom attributes are attributes that are not part of the standard HTML5 attributes but are explicitly created. They allow us to add our own information to HTML tags. These are not specific and can be used with all the HTML elements. The extra information stored through custom attributes are data that need not have any defined meaning. These data are private to the page or application. The custom attributes are also known as data attributes.

Any attribute whose name start 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 agent. The data stored can be used in JavaScript of the page. We can also use these data attributes to style our elements.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

<element data-*="value">

Two parts of the custom attributes:

  1. Attribute Name – The attribute name must be at least one character long after the prefix “data-“. It should not contain any upper case letters.
  2. Attribute Value –  The value to be stored can be any string.

Example 1: In this example, we will read the values of these attributes with JavaScript is quite simple. In fact there are more than one way to do so. One simpler  way is using getAttribute() and setAttribute(). 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. setAttribute() can be used to modify the value of any existing attribute or to add a new attribute. 



 Filename: index.html

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>GeeksForGeeks</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>

custom_attributes.js: 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. The JavaScript code looks like this:

Javascript




function showPosition(runner) {
    var position = runner.getAttribute("data-position");
    alert("The " + runner.innerHTML + " is " + position + ".");
}

Output:

Output Screen

Example 2: In this example, we will see another way of accessing data attributes is by using dataset property. This property returns a DOMStringMap object with one entry for each custom data attribute. A DOMStringMap key is a transformed form of custom data attribute. The “data-” prefix is removed from the attribute name. Any hyphen in the name is also removed. In this way, we get a camelCase name. The attributes can then be accessed using the camelCase name stored in the object as a key like element.dataset.keyname or element.dataset[keyname]. We will take lists of foods. The custom attributes will contain food-type. The onclick attribute will trigger the JavaScript when an item is clicked.

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="vegitable">
            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>

custom_attributes.js: 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. The code snippet looks like this:



Javascript




function handleFood(food) {
    var foodType = food.dataset.foodType;
    alert(food.innerHTML + " is " + foodType +".");
}

Output:

Output screen

Example 3: In this example, we will set the background colors of the elements using the CSS access that we just saw. As the custom attributes are plain HTML attributes, they can be accessed from CSS. For example, we can use attribute selectors to style the background color of the element.

Filename: index.html

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>

styles.css: Select the elements in the styles.css file and set the background color of the elements using standard CSS properties. 

CSS




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

Output:

Output Screen

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :