How to Use Custom Data Attributes using HTML5

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 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

Example

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="http://w3lessons.info" 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 – http://w3lessons.info
• 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

<script>

// 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

site_details.setAttribute('data-sitename','w3lessons.info');

//new sitename = 'w3lessons.info'

</script>

Accessing data- attributes with jQuery

<script>

$(function(){

	$("#details").click(function(e) {

		e.preventDefault();

		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);

	});

});

</script>

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.