10

I have to choose between custom data tags or ids. I would like to choose custom data tags, but I want to be sure that they do not cause browser compatibility issues for the most widely used browsers today.

I'm using jQuery 1.6 and my particular scenario involves a situation where I need to reference a commentId for several actions.

<div data-comment-id="comment-1" id="comment-1">
   <a class="foo"></a>
</div>

It's easier to extract data tags in jQueryin: $('foo').data('commentId');

Extract a substring from the id seems a bit complicated and could break for one reason or another: <a id="comment-1"

Are there any sweeping merits or fatal flaws for either approach?

Deduplicator
  • 43,322
  • 6
  • 62
  • 109
Mohamad
  • 33,911
  • 31
  • 133
  • 213

2 Answers2

6

I would advise in favor of data attributes for the following reasons:

  • ids need to be unique document-wide. Thus they are limited in the semantics they can carry
  • you can have multiple data-attributes per element

and probably less relevant in your case:

  • changing ids might break idrefs

However, I'm not sure whether I understand your specs completely as extracting the element id in jQuery is as trivial as getting the data attribute: $('.foo').attr('id');.

You might be interested in Caniuse.com, a browser compatibility site for web technologies.

If XHTML is an issue to you, you might also be interested in how to use custom data attributes in XHTML: see here for a discussion on SO and here for an XHTML-compatible approach using namespaces.

TylerH
  • 20,816
  • 57
  • 73
  • 92
collapsar
  • 16,200
  • 4
  • 33
  • 60
2

this guy says data attibutes work on IE6.

Community
  • 1
  • 1
Tom
  • 13,527
  • 14
  • 63
  • 77