Question

Sometimes I want to attach some kind of meta data to a HTML node and I wondered, what’s the best way to do this.

I can imagine the following:

• Non-standard attributes: <div myattr1="myvalue1" myattr2="myvalue2" > (Breaks validation)
• Re-use an existing attribute <div class="myattr1-myvalue2-myattr2-myvalue2"> (Requires parsing and some level of escaping)

Both solutions are really ugly!

Is there any way to do this more elegantly? I’m already using jQuery so any good Javascript solution, if any, is appreciated, too.

Answer 1

HTML5 introduces the notion of custom data attributes, that anyone can create in order to attach custom, hidden data to elements for scripting purposes. Just create an attribute using a data- prefix, such as data-myattr1 or data-myattr2, and fill it with your data.

<div data-myattr1="myvalue1" data-myattr2="myvalue2">Content</div>

The nice thing about this solution is that it already works in all major browsers; they will all parse unknown attributes, and expose them in the DOM for access by JavaScript. HTML5 adds a few convenience mechanisms for accessing them, which haven’t been implemented yet, but you can just use the standard getAttribute to access them for now. And the fact that they are allowed in HTML5 means that your code will validate, as long as you’re willing to use a draft standard as opposed to an accepted one (I don’t believe the data- attributes are particularly controversial, however, so I’d be surprised if they were removed from the standard).

The advantage this has over namespaced attributes in XHTML is the IE doesn’t support XHTML, so you would have to implement something that pretends to use namespace attributes but actually just uses invalid attributes with a : in their name, which is how IE would parse them. It’s nicer than using class, because putting lots of data into a class attribute overloads it quite a lot, and involves having to do extra parsing to pull out different pieces of data. And it’s better than just making up your own (which will work in current browsers), because it’s well defined that these attributes prefixed with data- are private pieces of data for scripting, and so your code will validate in HTML5 and won’t ever conflict with future standards.

Another little-known technique for adding custom data to HTML, which is valid even in HTML 4, is adding script elements with type attributes of something other than text/javascript (or one of the couple of other types that can be used to specify JavaScript). These script blocks will be ignored by browsers that don’t know what to with them, and you can access them via the DOM and do what you want with them. HTML5 explicitly discusses this usage, but there’s nothing that makes it invalid in older versions, and it works in all modern browsers as far as I know. For example, if you would like to use CSV to define a table of data:

<div>
  <script type="text/csv;header=present">
    id,myattr1,myattr2
    something,1,2
    another,2,4
  </script>
  Content
</div>

This is the technique used by SVG Web to allow embedding of SVG in HTML, with emulation via Flash if the browser doesn’t support native SVG. Currently, even browsers that do support SVG (Firefox, Safari, Chrome, Opera) don’t support it directly inline in HTML, they only support it directly inline in XHTML (because the SVG elements are in a different namespace). SVG Web allows you to put SVG inline in HTML, using a script tag, and it then transforms those elements into the appropriate namespace and adds them to the DOM, so they can be rendered as XHTML. In browsers that don’t support SVG, it then also emulates the function of the elements using Flash.