Datasets in HTML 5 and what they’re good for

Datasets are quite an un-impressive part of the HTML 5 specification. It is only accompanied by two examples, of which the first is relevant but small and the latter is (in my view) completely besides the potential of this new functionality. Datasets are in short a way to store custom values on nodes in the DOM tree. This has always been possible when working client-side through JavaScript by keeping a mapping between the nodes and the values stored, which meant that the values weren’t actually stored on the nodes, but just related to the nodes elsewhere (e.g. using jQuery.data).

With HTML 5 and the introduction of datasets, we can do something new. The main advantage and the really huge application area for datasets are, that you can include custom attributes in the serverside-rendered HTML, that the client-side script will use to enhance the browsing experience.

A common example: You have a gallery page, which has an area for displaying a large image and one for a list of thumbnails. In the serverside-rendered HTML you render the first picture in the large image and a list of thumbnails below. In javaScript you hook a function for each thumbnail to change the large image. But where do you supply the path for the large image? It could be done via several methods:

  • from the server render a JavaScript-array that do the mapping,
  • have a strict naming-convention, and e.g. always remove “-thumb” from the thumbnail path to obtain the large image path,
  • hide it on the node by abusing some existing legal property – e.g. hide it in the title-field of the thumbnail, or
  • add it is a new property on the node, that will make your document non-compliant with the standard.

But with datasets, the server simply includes the large image path on the thumbnail image node (or the surrounding link node) via a custom data-attribute here named data-fullpath:

<img
  id="large-image"
  src="images/large/picture1.png"
  alt="Large Picture 1"
/>
<ul id="thumbnails">
  <li>
    <a href="gallery_with_picture1_enlarged.html" title="View Picture 1">
      <img
        src="images/thumbs/picture1.png"
        data-fullpath="images/large/picture1.png"
        alt="Picture 1"
      />
    </a>
  </li>
  <li>
    <a href="gallery_with_picture2_enlarged.html" title="View Picture 2">
      <img
        src="images/thumbs/picture2.png"
        data-fullpath="images/large/picture2.png"
        alt="Picture 2"
      />
    </a>
  </li>
  <li>
    <a href="gallery_with_picture3_enlarged.html" title="View Picture 3">
      <img
        src="images/thumbs/picture3.png"
        data-fullpath="images/large/picture147_no_conventions.png"
        alt="Picture 3"
      />
    </a>
  </li>
</ul>

Of course, in live implementation the links above would link to pages, where the other thumbnails where shown in the large area to allow for graceful degradation, but this is just to show the idea. The above example have now been updated to provide actually interesting links in the surrounding <a>-tags and not just link to the image as several have suggested.

The JavaScript that went with this would be something along the lines of (asuming jQuery.dataset functionality):

$("ul#thumbnails a").click(function(e) {
	$("#large-image").attr("src", $(this).find("img").dataset('fullpath'));
	return false;
});

See full example here – it works in all browsers, and is valid HTML 5. The JavaScript works in non-HTML5 browsers, as it includes a little jQuery plugin I wrote adding the method dataset, which includes a fallback if the DOM attribute “dataset” is not available.

I personally find this to be a very clean way of implementing this feature over the many hacks, that we need to use today. And this is of course not limited to galleries, but can be used for anything, where the script needs to know extra information about the objects in the document in order to add additional functionality through scripts on the page – this could include having a reference to “previous” or “next” image in the above gallery, meta-information about rows in a table to use for client-side searching, filtering or sorting, meta data for link previews and many other possibilities.

NB: This is not to be used as meta-data for external entities – only for scripts on the page enhancing the browsing experience. For providing meta-data for external entities, use microdata, which is completely different from datasets – but the two could be used to convey the same meta information, just with different recipients in mind.

No related posts.

Category: HTML 5, Trends, jQuery 11 comments »

11 Responses to “Datasets in HTML 5 and what they’re good for”

  1. Rune Bromer

    Nice :) I always just write a custom attribute on the element, even though it’s ugly as hell.

  2. Scott Wehrenberg

    I think you example does an awesome job of displaying the general idea behind datasets, and I too am pretty excited to see it in the spec. However, I don’t think this is quite the optimal markup for a gallery. The main issue I see is that users without javascript won’t have any way to access the full image. That’s the reason most lightbox and similar scripts today have you add the path to the full image on the link around the thumbnail.

  3. Scott Wehrenberg

    Too early in the morning.. I see now where you mention graceful degradation, cheers.

  4. jfk

    Just for the record – if you don’t care about html validity, just use ‘expando attributes’.

    Expando attribute is an html element attribute with name that is not colliding with standard attributes name.

    You can read them, write them, etc.

    I’m using this feature for years, very handy

  5. Joost

    In this case datasets would not be needed. Simply link to the full size image and use the following code:

    $(“ul#thumbnails a”).click(function(e) {
    $(“#large-image”).attr(“src”, $(this).attr(‘href’));
    return false;
    });

  6. Barklund

    @jfk: yes, so have I (as mentioned as the last bullet point). And the whole point of this is, that now it is legal – just name them “data-” :)

    @Joost: My note about degradability was a bit too hidden, and I have now changed the above example to convey my actual intentions. The idea in truly degradable sites (using the ideas of Hijax) is, that you should not simply link to the resource that the link changes, but to a version of the page identical to the one, that the javascript-hook creates. If we just linked to the image as you suggest, it would not be graceful degradation, just less crappy degradation ;)

  7. Brett

    It’s also easy to do this (keeps HTML valid and works on old browsers):

    document.getElementById(‘foo’).myCustomProperty = ‘bar’;

    Always nice to have options though.

  8. John Haugeland

    But you could already do this. This has been viable and standards compliant for years. You just use divs and spans, which are allowed unbounded use of attributes.

    Several of my web applications have been relying on this sort of thing since the Netscape 4 era.

  9. Destillat KW36-2009 | duetsch.info - GNU/Linux, Open Source, Softwareentwicklung, Selbstmanagement, Vim ...

    [...] Datasets in HTML 5 and what they’re good for [...]

  10. Tomasz Mazur

    Thanks for this plugin. Just wanted to write same functionality for my own purposes :)

  11. Is valid HTML5 OK to use now? | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

    [...] http://www.barklund.org/blog/2009/08/28/html-5-datasets/ [...]


Leave a Reply



Back to top

     

Get Adobe Flash playerPlugin by wpburn.com wordpress themes