2

So suppose I have this tag

<a href=""></a>

and then I make up some non-standard attribute

<a lol="haha" href=""></a>

If you ask why, well so that I can conveniently use that made up attribute in my javascript...

My question is...is there any possible negative repercussion of doing this....is there any good reason why I shouldn't be doing this?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
kamikaze_pilot
  • 14,304
  • 35
  • 111
  • 171
  • like others have said, add the "data-" prefix to your custom attributes. Like data-lol instead of just lol. According to the HTML5 spec, any custom attribute with that prefix is valid, others are not. –  Dec 05 '11 at 06:47

4 Answers4

7

Browsers will almost universally handle custom attributes. And when I say universally, I mean even IE6.

Of course the standard way to do that is with:

<a data-lol="haha" href=""></a>

Which, since you've tagged with jQuery, I'll mention can be read (even in IE6) with

$("a").data("lol");
Community
  • 1
  • 1
Adam Rackis
  • 82,527
  • 56
  • 270
  • 393
  • IE6 definitely handles it. IE5.5 handled it too. I can't remember further back than that. (Actually although I suspect it would've been fine I'm not sure if IE5.5 handled hyphenated attributes, but it _definitely_ handled one-word custom attributes like in the question.) – nnnnnn Dec 05 '11 at 05:42
  • I was forced to use IE6 (and code for it) as recently as eighteen months ago, and really the main issues were more about non-standard handling (or lack of support) for certain CSS features. (The event-related stuff was easy enough to work around in most cases.) – nnnnnn Dec 05 '11 at 05:49
1

I'd recommend using the HTML data- attribute HTML 5 data- Attributes

Jeff Camera
  • 5,324
  • 5
  • 44
  • 59
1

There is an attribute family that was made exactly for that: data-*. You should use

<a data-lol="haha" href="#"></a>

That will be valid and save you from any headaches. A custom attribute might conflict with a predefined one (or one that doesn't exist yet), or cause problems in non-compliant parsers.

Ricardo Tomasi
  • 34,573
  • 2
  • 55
  • 66
1

You can do this with HTML5:

<a data-lol="haha" href=""></a>

As for the downsides, I will say this: standards are made for a reason. Just because it looks like it works won't mean that it will work in the future.

Blender
  • 289,723
  • 53
  • 439
  • 496
  • Note that even (at least some) pre-HTML5 browsers support this, so this is a pretty safe option. – nnnnnn Dec 05 '11 at 05:55