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:
http://jcb.wefixedthisforyou.com/images/datablog/1.jpg" alt="1" width="575" height="265">
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:
http://jcb.wefixedthisforyou.com/images/datablog/2.jpg" alt="2" width="575" height="265">
Simple enough. We store the list in a variable, then we can access which attributes we need using the dataset p...