How to Use Custom Data Attributes using HTML5

Last modified on by Karthikeyan K

I would like to say Hearty Thanks to HTML5, because we now have the ability to attach HTML5 Data Attributes on all html elements you would like, whether it be metadata about a dimensions, latitude, longitude, custom height, and weight etc.

Best of all, it can be available in nearly every web browsers, since they can be easily grabbed with javascript & jQuery.

This features give developers the flexibility to embed all sorts of information in their markup. It will be very useful on drawing canvas in HTML5

HTML5 Data Attributes

HTML5 Data Attributes Structure

It consists of two parts

  1. Attribute Name
    • The data attribute name must be at least one character long and must be prefixed with ‘data-‘. It should not contain any uppercase letters.
  2. Attribute Value – It can be any string


Using the above syntax, we can attach the custom data attributes with values as shown below

<a href="#" class="details" data-sitename="w3lessons" data-link="" data-founder="Karthikeyan" data-tags="php,html5,css3,jQuery" id="details" />Site Details</a>

Now let us see how to access this data using javascript & jQuery to create a rich user experience.

If you click on Site Details, you will get the following values by accessing those attributes

  • sitename – w3lessons
  • link –
  • founder – Karthikeyan
  • tags – php,html5,css3,jQuery

Accessing data- attributes with JavaScript

If you want to retrieve or update these attributes using existing, native JavaScript, then you have to use the getAttribute and setAttribute methods as shown below

// Getting data-attributes using getAttribute
var site_details = document.getElementById('details');
var sitename = site_details.getAttribute('data-sitename');
// sitename = 'w3lessons'

// Setting data-attributes using setAttribute
//new sitename = ''

Accessing data- attributes with jQuery

$("#details").click(function(e) {
var site_details = $(this).attr("data-sitename");
var site_founder = $(this).attr("data-founder");
var site_tags = $(this).attr("data-tags");
alert(site_details + site_founder + site_tags);

In this tutorial, We have used custom data attributes to provide additional information to a client-side script. It’s a creative approach to many problems and its a perfect solution to use these attributes.

Also we have seen how easy it is to use javascript & jQuery to read values you attach attributes in any element in your page.

The custom data attributes won’t hang up the browser and your code will be valid since you are using valid HTML5 doctype, since the attributes that start with data- with all be ignored.

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome! Thanks!

You May Also Like

3 Responses

  1. Selvam says:

    what’s the use of this info? is that help in SEO

    • Hi Selvam,

      No, it won’t be indexed. The attribute itself will be cached with the
      page, but Google has no context of what the attribute or the value
      means, so it is meaningless to search engines.

      The advantage is that you can easily embed some scripting data
      (still semantic, but not for display) with your elements without having
      to insert inline javascript all over the place, and it will be valid

      Also data- is a standardized part of the HTML5 spec. Semantically it’s the best way to go.


  2. Philippe Vincke says:

    How about to load all the data attributes of an element into an array or an object so you don’t have to load them one by one ?

Leave a Reply

Your email address will not be published. Required fields are marked *