How To Use HTML5 Data Attributes?

It is  one of the most awesome new feature of HTML5 that HTML allows to add custom attributes so that you can to store data directly in the html code. In this case, these data will not be visible to the user. Data- * attributes allow you to store more data in any html elements. This feature of data attribute makes elements a highly flexible HTML tag attribute. Also, Developers can can avoid unnecessary AJAX calls, clogging of class names and enhance user experience.

What is data attributes in HTML5?

You can use your own attributes for each element in HTML5 starting with data- prefix. It allows you to store a variety of information that can help in the script, as well as design elements through CSS.

Attribute must have at least one character in lowercase. Uppercase letters are acceptable though, but they will be forcibly converted to lowercase, so do not give any effect. The names of the attributes you can use additional hyphens.

SYNTAX:

The following syntax gives you basic idea about data- * attribute:

The syntax of HTML5 data- attributes is very simple. You can also map the data item that will be available in JavaScript with the help of custom attributes.

How does data attributes work?

A data-* attribute is a custom attribute mainly used to stores custom data. You can set any number of data attributes in your element. For example, In input field, want to add more information about user, You can add like below using data-* attribute:

Here is an example to store data for a user:

This data isn’t for a visitor but it’s very useful for developers and make functionality easy while building web applications.

Typically, You can add any custom attributes with the help of that data- attributes with names.HTML5 standard specifically permits attributes data-* and reserves them for user data. Just make sure when you want to use custom data attributes in your HTML, the attribute will always begin with data- and after the dash , you can write your own naming convention.

Browser Support

HTML5 data attributes are supported in all the modern web browsers including Google Chrome, Mozilla Firefox, and Apple Safari. Both JavaScript and jQuery work equally well with data attributes. With these key concepts in mind, let’s take a look at some simple markup that will show these ideas in action.

How to access data-* attribute in JavaScript?

Let’s understand how you can access data-* attribute data with JavaScript.You can use the getAttribute () function to read the data-* attributes:

You can retrieve using getAttribute() function and change the value using setAttribute() function.The value of each property is a string.Now let’s see the jQuery example of data-* attribute in HTML5

You can also use the following line of code for jQuery using data() function instead of using attribute.

Here don’t get confused with jQuery’s .data() method as it works same as attr(). There is slight difference between two are ,attr() stores the information directly to the attributes of element which is publicly visible upon inspection where as data() stores the information in an internal jQuery cache so you cannot see it from the DOM structure.This means if you use inspect the DOM console, $(‘#name’).data(‘age’,25); does not update the value in the input element as seen using attr() function

How to use CSS for HTML5 Data Attribute?

You can easily manage CSS part for HTML5 data attribute. It work like normal CSS just explaining here how you can write CSS part.

For example, to change the width of input element based on data-age attribute, you can use the following line of code :

Here, I have used the selectors in the CSS to change the styles depending upon the value of data-* attribute. You can create as many cool effects using CSS and JS with data-* attribute in HTML5.

Hope you like the article. We highly appreciates comments and feedback.

You can also Subscribe here to stay updated on latest posts of Oraclemine.com.

Bhumi Shah is currently working with leading web development company as a Technical Lead and also the founder of the theCreativedev.com. She has immense interest in programming and web designing. She is passionate about technical blogging and almost versatile in terms of programming across various languages & frameworks such as PHP, MySQL WordPress, Twitter Bootstrap, AngularJS, HTML5, CSS3, jQuery and more.

Leave a Reply

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