Back to Top

How to Use HTML5 Data Attributes

how-to-use-html5-data-attributes

The Older version of HTML, HTML4 developers have tried to make the storage of arbitrary data associated with the DOM so anyone can come up with their own attributes, but it is risky.Sometimes you personally try to add code which might be incorrect or take a time to develop and all browser does not support such developed code.

Therefore, most web developers rely on class or rel attribute defined in HTML. For example, I want to apply some effect on some HTML element, I prefer to add the Id to the class or use unique id for each element.Do you want to any element to identify a certain custom elements you require?

Now we look at how HTML5 can solve this problem. A new feature being introduced in HTML5 which is known as custom data attributes.HTML5 data-* attribute is user-defined custom attributes which are used to allow users to define their own attributes and it must start with “data-“.

Now this the time to understand the data attribute of HTML5.

What is HTML5 data attributes

Fortunately, HTML5 introduces custom data attributes. You can use any name to lowercase but prefixed with data-{attributeName}.

SYNTAX:

The above syntax is perfectly valid HTML5 code with two custom attributes called data-author and data-site. You will get the values of these attributes using JavaScript APIs,jQuery with the similar way you get the standard attributes.

The custom data attributes :

  • It should be used only when no suitable HTML5 attribute exists.
  • Unlike microformat, data attribute should be ignored by the search bots.
  • You can pass any type of data.If you want to combine multiple data, you can combine as JSON encoded format and decoded it using javascript JSON decoder.

How to get data using getAttribute and setAttribute JavaScript

You can get and set data-{attribute} using the JavaScript getAttribute and setAttribute and all browsers support it.

This example will explain to you how to use getAttribute and setAttribute with data-?

getAttribute: This method gets the specified name corresponding attribute value.

SYNTAX:

attributeName is the name of the attribute and it is required. It returns the value assigned to an attribute.

setAttribute: This method sets the specified name corresponding attribute value.

SYNTAX

Parameters:

attributeName: This parameter is required and type can be a string which contain the name of an attribute.

attributeValue: This parameter is also required and type can be the string, number, or Boolean which contain the value of an attribute.
This method works but only used for older browsers which do not support HTML5.

How to use jQuery data () method?

jQuery has in-built method data () from the version 1.4.3 which is for the HTML5 data attributes.Using jQuery .data () method to access these “data- *” attribute.You do not need to specify a prefix data- {attribute}.

The following example shows you how you can use jQuery data () method.

In above code you can see that, can directly assign the data through the .data (key, value) method.

But jQuery method data () is not physically change the attribute.jQuery data() function set the new value in the memory. It doesn’t change the attribute in the DOM.To change the attribute in DOM(browser), you have to use:

HTML5 DataSet

HTML5 itself provides the traditional method which dataset Properties which is a standard way to attach additional data. A dataset property is a support to set or get the corresponding element of data- attributes.In short, Using a dataset, You can access your custom data attributes.

Here is an example of dataset property attributes:

To obtain the corresponding values od data-* attribute, dataset properties is used.Data attribute is essentially supported by all latest browsers, but the dataset property is newly defined so currently it support in some specifically compatible versions of browsers.

If you are interested in doing some demo for HTML5 data attribute, share with me.I would like to see your experiments.

Comments (1)

  1. Super tutorial. Thank you for your great tutorial is well explained.

    It is very helpful to my website.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How to use jQuery Lazy Load Plugin?

Posted on 9 years ago

Bhumi

To Swap Database Row in PHP

Posted on 12 years ago

Bhumi

How to Accordion Menu with Modx

Posted on 11 years ago

Bhumi

How to Create a Custom WordPress Widget

Posted on 11 years ago

Bhumi