Do HTML5 custom data attributes “work” in IE 6?

You can retrieve values of custom (or your own) attributes using getAttribute. Following your example with

<div id="geoff" data-geoff="geoff de geoff">

I can get the value of data-geoff using

var geoff = document.getElementById("geoff");alert(geoff.getAttribute("data-geoff"));

See MSDN. And although it is mentioned there that you need IE7 to get this to work, I tested this a while ago with IE6 and it functioned correctly (even in quirks mode).

But this has nothing to do with HTML5-specific attributes, of course.

Yes, they work.

IE has supported getAttribute() from IE4 which is what jQuery uses internally for data().

data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js

So you can either use jQuery's .data() method or plain vanilla JavaScript:

Sample HTML

<div id="some-data" data-name="Tom"></div>

Javascript

var el = document.getElementById("some-data");var name = el.getAttribute("data-name");alert(name);

jQuery

var name = $("#some-data").data("name");

Not only does IE6 not support the HTML5 Data Attribute feature, in fact virtually no current browser supports them! The only exception at the moment is Chrome.

You are perfectly at liberty to use data-geoff="geoff de geoff" as an attribute, but only Chrome of the current browser versions will give you the .dataGeoff property.

Fortunately, all current browsers - including IE6 - can reference unknown attributes using the standard DOM .getAttribute() method, so .getAttribute("data-geoff") will work everywhere.

In the very near future, new versions of Firefox and Safari will start to support the data attributes, but given that there's a perfectly good way of accessessing it that works in all browsers, then there's really no reason to be using the HTML5 method that will only work for some of your visitors.

You can see more about the current state of support for this feature at CanIUse.com.

Hope that helps.