Hidden inputs vs HTML5 data attributes

Question

Something that's been bugging me recently is the use of HTML5 data attributes and when is the appropriate to use them.

Typically, on a page that performs a number of AJAX calls to my server, I require the ID that is representative of the page being viewed. I've currently been storing this in a hidden <input> element on the page, which is then accessed and stored in a JS variable at the top of my jQuery doc ready call.

I've been considering moving it to a data-id attribute on the body element, which I then would access in jQuery using $('body').data('id');.

Is there any advantages to using HTML5 data atttributes or visa versa? Performance? Security? "Best-Practices"?

It's my understanding that data attributes are accessible by all browsers so dealing with IE isn't a concern.

Answer 1

One of the main drawbacks is accessibility.

Since those attributes aren't submitted to the server in POSTs, you'll need to keep in mind what happens in JavaScript-disabled browsers. If your page should also be able to degrade gracefully and perform those same AJAX-requested features via traditional form submissions if necessary, a hidden field will still be required.

That said, I'm a big fan of data- attributes when they make sense, especially in strictly "application" type sites where you can safely mandate JavaScript. It's a lot nicer to tag a table row with a data-id attribute than stuff a hidden field in one of its cells, for example. Especially coupled with jQuery's nice data- attribute support for the .data() method, that makes for clean, intuitive code in situations where hidden fields can be a bit messy.

Answer 2

Here's my take:

• Hidden inputs are meant to be used in forms as a way of passing data back to the server without making it visible, or editable, on the page.
• Attributes are meant to describe a property of an element. data- attributes are meant to convey information about an element to JavaScript on the page.

Based on that, a data- attribute on the html or body element would seem most appropriate.

An alternative, albeit less-semantic, solution is to serialize your page metadata as JSON and use a script tag to set it as global variable on the page. You can see this in action on, for instance, GitHub repositories, where a global GitHub object is created near the top of the page and some information (the repo name, the current branch, the latest commit) is added to it for easy access.