HTML5 Data Attributes

HTML5 data attributes are a simple means to embed data in a webpage. It is useful for exchanging data between the server and the front end, something that used to require outputting <script> blocks or hidden markup.

With the recent updates to the jQuery data() method, HTML5 data attributes are pulled automatically and are available as entries, as you can see from the example below:

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"
	data-options='{"name":"John"}'>
</div>

To access the data attributes of this div, you would use code like the one below:

$("#d1").data("role");			// "page"
$("#d1").data("lastValue");		// 43
$("#d1").data("hidden");		// true;
$("#d1").data("options").name;	// "John";

Read more about data() in the jQuery docs.

Tagged: