*/ How can you use HTML5 custom data attributes effectively?

2 Why use custom data attributes?

Custom data attributes can be used to enhance the functionality and appearance of HTML elements without relying on non-standard or invalid attributes, or cluttering the class or id attributes. For example, you can store metadata relevant to the element, define custom states or roles that can be toggled by JavaScript, apply dynamic styles or animations based on data values, and create custom components or widgets with their own data and behavior. These custom attributes can help you create things like ratings, timestamps, coordinates, sliders, tabs, tooltips, active states, hidden elements, selected items, colors, sizes, and transitions.

3 How to use custom data attributes in JavaScript?

To access the custom data attributes of an element in JavaScript, you can use the dataset property, which returns an object with the names and values of the attributes. For example, if you have an element like <div id="myDiv" data-role="dialog" data-title="Hello"> , you can get or set its data attributes like this:

let myDiv = document.getElementById("myDiv");
let role = myDiv.dataset.role; // "dialog"
let title = myDiv.dataset.title; // "Hello"
myDiv.dataset.title = "World"; // change the value        

Note that the names of the attributes are converted to camelCase in the dataset object, so data-role becomes dataset.role .

4 How to use custom data attributes in CSS?

To access the custom data attributes of an element in CSS, you can use the attr() function, which returns the value of the attribute as a string. You can use this function in various places, such as content, pseudo-elements, or selectors. For example, if you have an element like <span data-color="red">Red</span> , you can style it based on its data attribute like this:

span[data-color] {
  color: attr(data-color);
}
span[data-color]::after {
  content: " (" attr(data-color) ")";
}        

Note that the attr() function only works with strings, so you cannot use it for numeric or boolean values, or for calculations or transformations.

5 What are some best practices and standards for custom data attributes?

Custom data attributes are a powerful and flexible feature of HTML5, but they should be used with caution. When using custom data attributes, make sure that there is no suitable standard HTML attribute or element for your purpose. Additionally, use descriptive and consistent names for your custom data attributes, and separate words with hyphens. Ensure that the values for your custom data attributes are valid and meaningful, and only store related data in them. Furthermore, use JavaScript and CSS to manipulate and style your custom data attributes instead of using them directly in the HTML markup. Lastly, use custom data attributes sparingly to avoid potential problems.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?