How You Can Use HTML5 Custom Data Attributes and Why
In this article, I am going to show you how you can use HTML5 custom data attributes. I’m also going to present you with some use cases that you can find helpful in your work as a developer.
Why Custom Data Attributes?
Very often we need to store information associated with different DOM elements. This information might not be essential for readers, but having easy access to it would make life a lot easier for us developers.
For instance, let’s say you have a list of different restaurants on a webpage. Before HTML5, if you wanted to store information about the type of food offered by restaurants or their distance from the visitor, you would have used the HTML
class attribute. What if you also needed to store the restaurant
id to see which particular restaurant the user would want to visit?
Here are a few problems with the HTML class-based approach.
- Classes are not meant to store data like this. Their main purpose is to allow the developer to assign style information to a set of elements.
- Let’s say a given class name begins with numbers. If you decide to later style the elements based on that data in the class name, you will have to either escape the number or use attribute selectors in your stylesheet.
To get rid of these issues, HTML5 has introduced custom data attributes. All attributes on an element whose name starts with
data- are data attributes. You can also use these data attributes to style your elements.
The HTML Syntax
As I mentioned earlier, the name of a data attribute will always start with
data-. Here is an example:
<li data-type=”veg” data-distance=”2miles” data-identifier=”10318″>Salad King</li>
You can now use these data attributes to search and sort restaurants for your visitors. For example, you can now show them all the vegetarian restaurants within a certain distance.
The name of a valid custom data attribute always begins with the prefix
data-. Also, the name must only contain letters, numbers, hyphen (-), dot (.), colon (:) or underscore (_). It cannot contain capital letters.
There are two things that you should keep in mind when using data attributes.
Second, data attributes should only be used when there are no other appropriate HTML elements or attributes. For example, it is not appropriate to store an element’s
An element can have any number of data attributes with any value you want.
Continue reading %How You Can Use HTML5 Custom Data Attributes and Why%