HTML Custom Data Attributes
You may have come across an attribute that begins with data- in the HTML code of a website or tutorial.
What are those attributes and what do they mean?
Data Attributes, as they are called are a semantic and accessible way to label HTML elements. Instead of interacting with an element by its CSS id, class, or value, you can create custom data attributes and style and interact with those elements using its data attribute. Data attributes are especially handy when an element
Let’s look at an example.
If you had a board for a game, where each square or space is represented by a div, most likely you would need a way to identify one div from another, so that write logic for how the game works, how pieces can move, etc.
To create our board in Javascript, our function may look something like this.
function createBoard() {
for (let i = 0; i < boardSquareArray.length; i++) {
let square = document.createElement('div')
// boardContainer is a parent div, that contains the boardSquare divs
boardContainer.appendChild(square)
}
}
We have a loop that is creating a div an element as many times as there are elements in the boardSquareArray. Since we are incrementing the value of i each time the loop runs (and stopping once i is equal to the length of boardSquareArray) we could use it as a data-id attribute for each board square.
Updating our code above, we now have something like this:
function createBoard() {
for (let i = 0; i < boardSquareArray.length; i++) {
let square = document.createElement('div')
square.setAttribute('data-id', i)
// boardContainer is a parent div, that contains the boardSquare divs
boardContainer.appendChild(square)
}
}
Assuming our boardSquareArray as a length of 5, our HTML will look like this:
<div class="grid">
<div data-id="0"></div>
<div data-id="1"></div>
<div data-id="2"></div>
<div data-id="3"></div>
<div data-id="5"></div>
</div>
Arrays are zero-indexed, so our first div has an data-id value of 0. If it needed to start with 1, we can make this update to the setAttribute.
square.setAttribute('data-id', i + 1)
Ok, so?
With the above example, you may be wondering why not use id instead of data-id? In this case, yes, id does make more sense, since data attributes should only be used when there is not a more appropriate HTML attribute to use.
A real-world example of where a custom data the attribute is useful is for specifying a dark or light theme within the CSS.
If the dark theme was activated by a checkbox, an attribute like data-theme with a value of dark could differentiate which CSS to apply to the page. Here is a quick example.
But why not use a class?
Right! This same effect could be triggered by adding and removing a dark class to the body tag and using that to change properties in the CSS. But, think about if we’re rendering more than a line of text to the page. What if a webpage needed to render data from multiple objects onto a page?
For an online marketplace, one object may have dozens if not hundreds of attributes (or properties) associated with it. The code would quickly become unmanageable if each attribute had corresponding CSS classes or IDs and those were used for styling or sorting and filtering with Javascript.
Overall
I think data-attributes are really cool!
I can see how they can be used to write cleaner, more accessible code, especially for data-heavy applications.