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
  • 31,815
  • 47
  • 169
  • 296
kamikaze_pilot
  • 13,674
  • 34
  • 106
  • 170
  • 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
  • 81,646
  • 52
  • 262
  • 388
  • 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,186
  • 5
  • 41
  • 58
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
  • 33,240
  • 2
  • 54
  • 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
  • 275,078
  • 51
  • 420
  • 480
  • 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