HTML5 Data- attributes

data-attribute what? ha, so, if you seen these before and have not looked at them yet, these are slick. You can check out the 411 at W3C. Yet as slicker-then-grease they are, they are nothing new for you that do not worry about your HTML passing 100% in the standardization department. In fact, I’ve used this approach, lets see, maybe as far back as 2003 or so. In short, you can add ANY attribute you want to a HTML tag and pull it out in JS. Lets consider the following HTML fragment:

Somewhere in JS land in your source you can add the following:

Reload that bad boy and yup, your log should have a line “yuppers, 2003 for sure” in there. This is great for things like dynamically generating form items that have more complex details behind them, or hey, simple things like ordered/unordered lists with some extra details for processing based on user interactions. Take a look at my example used in the previous post


Around line 49 you will see that I stick the computed coordinates into the DIV elements as attributes rx and ry. Bamm!

Of course if you are worried about passing that W3C validations, use data-rx and data-ry


This entry was posted in CSS3, HTML5, Techy, Universal Mind. Bookmark the permalink.