HTML5 provides several conventions that help simplify markup and create more digestible, standards-compliant code. Specifically, we now have the ability to add custom data attributes to HTML elements. Each custom data attribute we create consists of two parts:
1. An attribute name
Data attribute names must be at least one character long and must be prefixed with 'data-'. Data attributes must not contain any uppercase letters.
2. An attribute value
An attribute value can be any appropriate string.
Consider the following scenario:
Nothing fancy, just a short list of college students. What gives this list a little bit of extra sizzle are three custom data attributes we've added. We've created an attribute for the major, hometown, and gpa of each student. We can now access this metadata through our site's javascript without any need for ajax or server-side database queries:
Simple enough. We store the list in a variable, then we can access which attributes we need using the dataset property (part of the new HTML5 javascript APIs). The data attributes can be manipulated the same way.
Consider a second, css-only scenario. Using data attributes and the css 'content' property, we can display the information about our students in a handy tooltip with ease:
Now, when a user hovers any of the items in the list, we have a way to easily and quickly display any of the data attributes included about our students.
Data attributes are only one of the great features HTML5 has provided and we have only scratched the surface of what can be done with data attributes. Creating custom data attributes for our content provides a clean, unobtrusive way of accessing and storing information about the content we are trying to convey.
