56

Possible Duplicates:
Custom attributes - Yay or nay?
Non-Standard Attributes on HTML Tags. Good Thing? Bad Thing? Your Thoughts?

In current learning project I am working on, I need to add an attribute whose value will be a number. At first I thought of using "id" for this purpose but an answer revealed that it is not good to do that.

Is it OK if I create my own attribute, say "messid" and assign a numeric value such as "12", "6" etc to it?

Here is why I want to do this so that you can correct me if I am doing it totally wrong: I need to access this number in my JavaScript (using jQuery). Just taking the value of attribute is easy but extracting the numeric value from a string like "m12" or "m6" is a pain. (I am a beginner in JavaScript world.)

Community
  • 1
  • 1
Hemant
  • 19,486
  • 24
  • 91
  • 127

7 Answers7

109

There has been much discussion about this:

At the end of the day, I am on the camp that believes data attributes are the best way to go. They are being introducted in HTML5 to avoid name conflicts. Essentially, if you want to store anything data related you just prepend "data-" on the attribute name:

<div class="user" data-userid="5"></div>

The only con to the whole thing is then that your XHTML won't validate, but I honestly don't care about that stuff. (That's right, I said it)

Community
  • 1
  • 1
Paolo Bergantino
  • 480,997
  • 81
  • 517
  • 436
  • 9
    +1. I Completely agree this approach is a working solution that is simple to implement and doesn't break anything. Pragmatism over Idealism wins in my book too. – AnthonyWJones Aug 20 '09 at 12:19
  • 1
    I would go with this, since it works today and since it is in the HTML5 specifications it will probably work 10 years from now. It also keeps the data independent from other values (such as keeping it in the `id` attribute, which might have to change for other reasons later on) while still keeping it on the element. And yes, HTML validation errors should be seen as recommendations/pointers to problems, not must-fix errors (and while on that trail, I'd say the same for JSLint just to stir things up a bit =) – Blixt Aug 20 '09 at 12:21
  • 7
    "That's right, I said it" -- the first step is admitting it. ;) – nickf Aug 20 '09 at 12:33
9

In HTML 5 you're allowed to add any attribute starting with data-, so e.g. <div data-messid="12"> is OK.

HTML 4 and XHTML 1 won't validate if you add your own attribute, but besides that nothing bad will happen if you choose attribute name unique enough (so it won't conflict with any current or future HTML attribute).

Kornel
  • 97,764
  • 37
  • 219
  • 309
6

Just so you know, you can easily extract an ID from a string like m12 or m6, I would do it like this:

//name the IDs m_12, m_3 etc
var number = $('#someElement').attr('id').split('_')[1];

Or if say, you have a bunch of links with numbers in the ID as above, and all the links have the clickMe class:

$('a.clickMe').click(function() {
    alert($(this).attr('id').split('_')[1]);
});
karim79
  • 339,989
  • 67
  • 413
  • 406
2

I use custom attributes, and since they are supported by all browsers I checked I think it is not bad to use them. You can also use custom HTML tags to simulate HTML5, with some IE hack, so why not use attributes, if they don't need any hacks?

Anyway, you can read similar discussion here: Custom attributes - Yea or nay?

Community
  • 1
  • 1
Thinker
  • 14,234
  • 9
  • 40
  • 55
1

This isn't a definitive answer, but having had to do this in the past I can say this not only works well, it is cross-browser friendly.

Nathan Taylor
  • 24,423
  • 19
  • 99
  • 156
1

If using jQuery you can use .data to store custom information against an element.

The downside of custom attributes are:

  • IE6 creates extra objects to store custom 'expando' attributes these have a tendency to leak especially if they are created via script.

  • validation issues

redsquare
  • 78,161
  • 20
  • 151
  • 159
  • I am using ASP.NET MVC and I am trying to add custom attribute "data-messid" using htmlAttribs parameter of html helper methods: new { @class = "mcf", data-dd = Html.AttributeEncode (m.ID)}. But it doesn't work (syntax problem). I see you are active in ASP.NET MVC tag, so please can you help me how to do it? – Hemant Aug 20 '09 at 12:36
  • Sure - ask another Q with a asp.net mvc tag – redsquare Aug 20 '09 at 12:41
  • although what you have looks correct – redsquare Aug 20 '09 at 12:42
  • I thought it will be a too trivial question. Anyway, going to open another question for that... – Hemant Aug 20 '09 at 12:46
-9

No - it's not.

Arnis Lapsa
  • 45,880
  • 29
  • 115
  • 195
  • Haters - what did i say wrong? Is it fine if site does not pass W3 validation? – Arnis Lapsa Aug 20 '09 at 12:15
  • 2
    I up-voted this *only because* I feel it's a genuine answer; though I'd hazard a guess that the down-votes were due to a lack of explanation. And no, I don't think just providing a link is sufficient. I do believe that you should at least summarise the page you link to, even if you don't choose to explain *yourself*. – David Thomas Aug 20 '09 at 12:17
  • 1
    @Arnis: May be, may be not, but how hard would it have been for you to include that small amount of text in your "answer"? – AnthonyWJones Aug 20 '09 at 12:21
  • @ricebowl, I'm a programmer - Hermant didn't ask for an argument explicitly – Arnis Lapsa Aug 20 '09 at 12:21
  • @AnthonyWJones - it wouldn't be hard at all. But then - we wouldn't have this exciting conversation. :) – Arnis Lapsa Aug 20 '09 at 12:23
  • Anyway - if this answer is wrong - prove it. I'll be glad to learn something new and delete my answer. :) – Arnis Lapsa Aug 20 '09 at 12:24
  • what if the external link breaks? The answer becomes....worthless! – redsquare Aug 20 '09 at 12:27
  • @redsquare, no - it wouldn't be worhtless - it would be argumentless. – Arnis Lapsa Aug 20 '09 at 12:40
  • @Arnis hmmm, you appear to be a few beans short. – redsquare Aug 20 '09 at 12:45
  • @Arnis: This is one of those wars where both sides have a reasonable point. I don't downvote people for having reasonable point even if it conflicts with my own. I downvoted because you have not made (and dispite this converstion still haven't made) any effort at all to express why you said "No." Had you included the simple sentence "because it would faule W3C validation" I would not have downvoted (or removed my down vote). – AnthonyWJones Aug 20 '09 at 14:23
  • 2
    While this answer may theoretically answer the question, [it is better to include the essential parts of the answer here](http://meta.stackexchange.com/a/8259), and provide the link for reference. Please add the relevant content directly to your answer, as it'll prevent further link rot. – Unihedron Sep 15 '14 at 11:49