Use HTML5 data attributes for selectors

Everything you need to know about the HTML5 data attribute

The HTML5 data attribute allows you to assign custom data to an element. This article describes how to use it and gives examples of when it is ideally used.


introduction

Before HTML5, we had to rely on "class" or "rel" attributes to store small snippets of data that we could use on our websites. This sometimes created problems and could lead to conflicts between the design and functionality of websites. With the advent of HTML5, a new attribute called "data" was introduced. In this article I'll look at some examples of how we use this attribute and how it should be used properly.

As websites become more and more data-driven and app-like, they start to store more data on certain elements. For example, when we create an audio application. We may have standard markup like:

The above markup is perfectly acceptable, but sometimes we want to store more information about each track than the source. For example, we might want to assign other specific track information such as duration, tempo, and artist. We can do this by assigning custom data attributes to each audio source, e.g.

By providing these custom data attributes, you can then perform tasks such as searching, filtering or grouping in our application by duration, tempo or artist based on the associated values.


How to use the data attribute

The name of a data attribute must begin with the string 'data-' and must contain at least one character after the hyphen, using any HTML naming convention.

The W3C specification for data attributes states the following:

Custom data attributes are used to store custom data for the page or application that does not have suitable attributes or elements.

This means that we should only use this data internally in our application and should not be used to display the information to our users. Also note that you can assign as many custom attributes as you want to an element with any value.


When should I use the data attribute?

We already looked at how you can use the data attribute. However, so that you can get a clear understanding, let's look at a few more examples.

Fortunately, Webdesignuts + have already covered some in-depth tutorials on some good use cases. One of the tututs explores how you can use these to create and display notification bubbles by assigning the notification item to an anchor tag. This time the data attribute is used to show the bubble value of the notification bubble.

profile

In another tip, we can also see how it is used as part of the markup for a tooltip

That is the connection

This time is used to display the text for the tooltip.


When should I not use the data attribute?

We shouldn't be using data attributes on something that already has an attribute already set or more suitable. For example, it would be inappropriate to use:

8 p.m.

when could we use the already defined attribute within an element like below:

Data attributes should not be used as an alternative to metadata or microformats. Microformats are primarily intended for humans and were introduced to define our markup context. For example, if you have a Vcard that contains contact information about a person or organization, you would assign it a Vcard class so that machines would understand that it was contact information.

When micro-formatting, you should use your markup as

Instead of the data attribute like

To learn more about microformats, visit Mircorformats.org.


Use data attributes with CSS

Once we've implemented data attributes in our HTML markup, we can address them using CSS. It is important to know that you should not use data attributes directly to use styles, although in some cases it may be appropriate. Targeting data attributes in CSS is similar to targeting other attributes. You can just use them like this:

[data-role = "page"] / * Styles * /

For example, when building a multi-device website or app, you may want to target certain content that you should only view on mobile devices. Take the following marker

CSS then allows you to hide all mobile pages when viewed on a desktop.

div [data-role = "mobile"] display: none;

While hiding content based on the display device is not recommended, there are times when it is appropriate. You should base this on each and every circumstance and case.

It is also possible to use the data from the attribute and display it via CSS. While the specification states that you should not use the data from the custom attribute to display it to your users, it is possible and may prove to be the best practice. This is how it is achieved.

In CSS, you would then use the pseudo-element ": after" (or some other generated content) and use the attribute as part of the "after" content like this:

.Test display: inline block; .test: after content: attr (data content);

This would then display "This is the div content" in the ".text" file.


Use data attributes with jQuery

Now we've looked at how to target elements with the data attribute using CSS. Let's take a look at how you can get this data using jQuery.

Note: The processing of the data does not fall within the scope of this tutorial, as this tutorial is specifically intended for front-end developers and designers.

There are a few ways to get the data from the element using jQuery. Let's look at some of them.

Google

If we had an anchor tag like the one above that had a data attribute from data-info, we can access that data the same way we would get any other attribute value.

$ ('. Button'). click (Function (s) e.preventDefault (); thisdata = $ (this) .attr ('data-info'); console.log (thisdata););

You can test this by opening the js console in your web inspector and then clicking the link.

The great thing about the data attribute is that we can also use it to serve json data like this one.

With jQuery, we can get this data using jQuery's data object method.

$ ('. Button'). Click (function (s) e.preventDefault (); thisdata = $ ('div'). Data ('info'). Foo; console.log (thisdata););

The above example would then log "bar" in the console log.


Cross-browser support

I know that before you get too dizzy using this new attribute, you want to know which browsers support it and when you can use it. The good news is that it is well supported in all modern browsers. Anything that supports HTML can access the data attribute. If you are using the attribute for both styling and data access (use with caution) the browser must support CSS3 selectors.

The even better news, however, is that all browsers (even IE7) already allow you to use the data- * attribute on elements. If you are using jQuery 1.4 or higher, you can access the data with the data object of jQuery. However, if you are only using JavaScript, you will need to access the data using the JavaScript getAttribute method.

For full list of records support, visit canIuse.com.


Conclusion

As websites and web apps become more complex and contain more information and data, this new attribute is a welcome addition to the toolbox. I've used it in some real world examples before and found it very useful to have a more responsive (faster) website as data that would otherwise have to be fetched from the server can now be generated in the markup and used when needed.

In summary, if you adhere to the following three rules, you can ensure that you are using the new attribute in its most effective and semantic way.

  1. Use it for internal use on your website / app only. For example, it should not be used in an XML / RSS feed for use on external websites or apps.
  2. Don't just use it for CSS styling.
  3. Do not use it to replace an existing attribute or element that would be more semantic or appropriate.

Now that you have a deeper understanding of the HTML5 data attribute and how it is used, I encourage you to start implementing it in your projects today.

Have you used it in real examples? In what scenarios did you use it? Does it save you time or is there something you would like to extend with this attribute? Let me know in the comments.

To see what else you can do with HTML5, check out some of the useful HTML5 code snippets on Envato Market.