Comments on: HTML5 Custom Data Attributes (data-*)

By: Mag Leahy

Mag Leahy — Fri, 07 Oct 2011 15:34:49 +0000

I like this a lot!

By: Gleenk

Gleenk — Fri, 30 Sep 2011 11:49:07 +0000

But what are the support for html5 doctype?

By: Jonathon

Jonathon — Thu, 08 Sep 2011 10:18:04 +0000

surely styling to data-* makes sense in a data rich web app rather than bloating the class attribute?

in pseudo code interfacing with the data as a user interface: remove class X add class Y
as a feedback on and as a consequence of a user action

vs change data-* to Y

not that looking at the underlying DOM is critical for the enduser, but filling class with non-hierarchical data FOR THE SAKE OF STYLING seems more wrong than styling to data also being held???

By: BJ

BJ — Sun, 21 Aug 2011 19:42:46 +0000

“Thanks to HTML5, we now have the ability to embed custom data attributes on all HTML elements[!!11!!1!1!]“

Wow, like expando properties avail since IE4? Thanks HTML5, you’re the best!

OK, assuming “dataset” provides a collection of values across multiple elements, that’s kind of useful (although already trivial via jQuery) .. but this article smacks of feature amnesia.

By: ryanve

ryanve — Sat, 13 Aug 2011 16:24:54 +0000

Would data attributes be appropriate for something like switching an ``'s src attribute between a hi-res and lo-res version (for better performing responsive design)? (Something like this) Also what is the best way to test support for this?

By: kevin

kevin — Mon, 08 Aug 2011 15:34:00 +0000

I use the data attributes a lot for jQuery apps. This attribute is for you to store private data for your application. If you are planning to have data understood by the search engines, you could use microdata which is more semantic.

By: Chris Bewick

Chris Bewick — Thu, 04 Aug 2011 07:53:17 +0000

@Andres – data-* is only for storing data which is to be used within your own website. As the primary purpose of ARIA roles is to communicate additional page structure to the browser/screenreader this would not be an appropriate time to use them. Stick with role=”main”.

By: Andres

Andres — Wed, 03 Aug 2011 17:17:37 +0000

If i’m using ARIA, should I add the attribute as “data-role” or just “role”????

are both valid?

By: Matt

Matt — Thu, 16 Jun 2011 15:57:39 +0000

I’ve found a case where I feel using the data-* attributes for CSS hooks is valid. Feedback is, of course, welcome.

I have an HTML table of data that can be sorted, ascending and descending, with AJAX by clicking on the column headers. I opted to use a data-sort-dir=”asc” attribute on the column header to not only tell the AJAX call which direction to sort the request, but also to create an arrow next to the column header indicating which direction the arrow points.

a[data-sort-dir="asc"] { /* Show the ascending arrow */ }

a[data-sort-dir="desc"] {
/* Show the descending arrow */
}

When a column header is clicked, the data-sort-dir attribute is updated or moved to properly reflect which direction is being sorted.

I also agree that the carrot example was a poor example since you’re storing data to display to the user in another method which was stated to be against the spec. In that case, the hidden element option David R posed in the comments or using the title attribute probably would’ve been better.

By: Conrad Damon

Conrad Damon — Thu, 26 May 2011 23:41:42 +0000

What about expando properties? Data attributes strike me as a namespaced (with “data-”) hash of expando properties, with the added dataset convenience. How do the following compare?

plant.setAttribute(‘data-fruit’,’7′);

plant.fruit = 7;

In general I’ve just stored element-related data in memory in a hash or object that can be retrieved based on the element’s ID.