All You Need to Know About the HTML5 Data Attribute

Prior to HTML5 we had to rely on using class or rel attributes to store little snippets of data that you could use in your websites. This sometimes led to problems and could cause conflicts between the styling and functionality of websites. The advent of HTML5 introduced a new attribute known as data. In this article Aaron Lumsden is going to be looking at some examples of how he would use this attribute as well as how it should be used correctly.

The name of a data attribute must begin with the string ‘data-’ and must contain at least one character after the hyphen using any HTML naming convention. This means that you should only use that data internally within your application and it should not be used for displaying the information to our users. It’s also important to note that you can assign any number of custom attributes to an element with any value. Data attributes should not be used as an alternative to meta data or micro formats. Micro formats are designed primarily for humans and were introduced to give your markup context. For example if you have a Vcard providing contact information about an individual or organization then you would give it a class of ‘vcard’ to let machines understand that this is contact information.