Working with HTML5 data attributes

Before HTML5, working with arbitrary data sucked. To keep things valid, you had to stuff things into rel or class attributes. Some developers even created their own custom attributes. Boy, was it a mess.

But that all changed with the introduction of HTML5 custom data attributes. Now you can store arbitrary data in an easy, standards-compliant way.

How do data attributes work?

A data attribute is exactly that: a custom attribute that stores data. They are always prefixed with data- followed by something descriptive (according to he spec, only lower case letters and hyphens are allowed). An element can have any number of data attributes you want.

Here’s an example using a list item to store data for a user:

Of course, this data isn’t very useful to a visitor because they can’t actually see it, but it’s wildly useful for building web applications. Imagine a delete button in your app:

All the data you need is right there to send to your backend script. No morerel stuffing or parsing IDs and actions out of other attributes. Data URLs make your life easier.

What can you store?

One thing to remember when working with data attributes is that you can’t store objects in them. Well, you can if you serialize them, but we’ll save that for another post.

For now, just know that you’re pretty much limited to storing strings.

Reading/writing data attributes with JavaScript

Using the delete button as an example, let’s look at how we can access this data with JavaScript.

Pretty simple, right? Now you can pass cmd and id to your app in an AJAX request or do whatever else you need to do with it.

Reading/writing data attributes with jQuery

Here’s the same thing using jQuery’s .attr() method:

Don’t get this confused with jQuery’s .data() method. Although there is some overlap in how data attributes and .data() work, they’re two totally different things. If you’re not familiar with it, just stick with .attr().

Using the dataset API

HTML5 actually has an API just for working with this type of data. Alas, IE10 and below don’t fully support it, but it’s still worth mentioning.

Using the button example again, here’s how to get and set data attributes using the dataset API:

Note how there’s no data– prefix or dashes here. Similar to the way CSS properties work in JavaScript, you’ll need to use camel case notation. The dataset API converts each one so you’ll always have data-some-attribute-name in your HTML and dataset.someAttributeName in your JavaScript. Magic!

Things you can do with data attributes

The examples above are very basic, but you can do so much with custom data attributes. Here are a few examples off the top of my head.


Say you have a list of things and you want to filter them by keyword. Just put the keywords into a data attribute and write a short script to loop through and show/hide them accordingly.

Here’s a quick and dirty filter using jQuery:


It’s arguably better to use classes, but you can style things against data attributes too. Here’s how to apply a style if the element has a certain data attribute (regardless of its value). First, the HTML:

Now the CSS:

But what if we wanted to style it based on the data attribute’s value? This will work for any data-warning attribute that contains the word error:


Bootstrap uses data attributes as an HTML alternative to configuring plugins via JavaScript. Here’s an example of a popover:

A better way to store data

Custom data attributes are widely used all over the web. The nice thing is that they work fine in older browsers, and they adhere to web standards moving forward. That means you can start using them today knowing that they won’t stop working tomorrow.

I’ve shown you a few common ways to use custom data attributes. What other uses can you think of? Have you used them before? Let me know by commenting below!

External Popup Links Using jQuery

With the deprecation of the target attribute in XHTML Strict, opening links in new windows has become a bit trivial, if not annoying, to standardize. I always look for a consistent, unobtrusive approach that degrades gracefully; and since I use jQuery quite frequently, this is how I usually handle them.

The solution is a small piece of jQuery code in your $(document).ready()section:

Now, add rel="external" to all of the links that you want to open in a new window:

From here on out, users that have JavaScript enabled will receive external pages in new windows, while those without JavaScript will still be directed to the appropriate location.

I use rel="external" because it’s generally a good practice to limit popup links to external websites only. You could very well use rel="popup"instead, but I prefer the former for semantics.