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:
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.