5

Right now I'm doing various invalid things like:

<span time="50" distance="60"></span>

And then grabbing that info with:

var time = $('span').attr('time');
var distance = $('span').attr('distance');

And then doing various things with the time and distance in jS/jQuery.

To me, this feels wrong. It's insemantic, but I really can't care less about that (actual data is not time and distance but something quite worthless and page specific, nothing that SEs are interested in). But is there some other reason why this is a bad idea?

I know there's a metadata plugin which does something similar in a more 'official' way, and I thought about using it. But this .attr stuff is suitable for my needs and I don't see any compelling reason to use the plugin.

So basically, is this a decent pattern to use, and if not, why not, and should I be interested in the metadata plugin.

Thanks.

Improve this question
2
  • Didn't you mean: var distance = $('span').attr('distance'); Commented Jul 24, 2009 at 22:16
  • 2
    It's not "insemantic", it's invalid. It's arguably more semantic than forcing everything into a class name for instance. Commented Jul 25, 2009 at 11:03

5 Answers 5

Reset to default
7

HTML5 includes support for embedding data in attributes which is backwards compatible. Here's an example:

<li class="user" data-name="John Resig" data-city="Boston"
     data-lang="js" data-food="Bacon">
  <b>John says:</b> <span>Hello, how are you?</span>
</li>

Useragents will perhaps implement the .dataset idea into javascript, which would easily let you pull out the data bits seperately, but for now just changing your classes to include data- is good enough. This will validate as HTML5.

To me this is far better than that metadata jquery idea - that just seems dumb to me.

See here for more info.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

HTML5 is not yet final and wont be mainstream for the next 5 years.
No, but this will work already and at least offers a possible standard way of doing this. I'm not saying I agree this is the best solution, but it is one that people can use and in the future it will be valid.
Fantastic, if this is in HTML5 then I am ALL over it. :)
You can completely ignore the fact that it's a HTML5 thing since no browsers care about unknown attributes - so you can use them without any problems (and by using a HTML5 doctype, you even make validators happy)
Besides that, it's worh mentioning that jQuery provides an easy way to access data attributes via .data(name[, newValue]).
3

If you are going to use custom attributes, and are using XHTML, it would be a good idea to namespace them and provide the appropriate 'xmlns' definition as part of the 'html' element. I do this any time I need to add attributes to provide some contextual information and it's worked quite well so far, especially with jQuery. You'd just use .attr('ns:name') instead.

Improve this answer

2 Comments

Namespaces in this respect are useful for interoperability. They're not meaningful otherwise. You're not editing non-standard attributes. You're editing properties of DOM objects.
Thanks for that, but it doesn't quite answer the question of whether or not using custom attributes is a good idea in the first place.
1

Why not to use it: your page will not validate on XHTML.

But that depends on how you see validation.

Improve this answer

4 Comments

(X)HTML validity doesn't care about Javascript setting of attributes and properties.
It does not if it is set through script. OP is putting the attributes on the html.
I'm putting it in HTML through script, so it will be fine for me. :)
@Mark There you have it thenUse it unsparingly! :D
0

The confusion comes from the fact that jQuery treats attributes and DOM properties as the same thing, and they're not. Attributes are metadata about your markup; DOM properties are metadata about DOM objects. jQuery correctly uses DOM properties to manipulate metadata about DOM objects representing markup elements. It incorrectly uses the terminology "attribute" to describe this.

Improve this answer

2 Comments

This is a great point, but I don't see why it's necessary to make the distinction.
Because the semantics of markup attributes is different than the semantics of DOM properties. It relates to your question in that setting markup attributes may pose different restrictions and forethought than setting DOM properties.
0

You could use the metadata plugin. Then your HTML would become:

<span class="{ time:'50', distance:'60'}"></span>

and your javascript would be:

var data = $('span').metadata();
var time = data.time;
var distance = data.distance;

That way your markup will validate and you can get data into your javascript on the server-side.

edit: Just noticed that you have mentioned the metadata plugin already. Sorry, I got over excited and just posted without reading the question properly. I'll leave my answer here though in case someone else finds it useful.

Improve this answer

2 Comments

That is not remotely a valid class value of an HTML element. You're promoting a methodology of storing client-side DOM object metadata; that methodology is not really valid or invalid, but conflating it with markup equivalents just confuses the issue.
I meant the markup will validate. Have clarified my post slightly.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.