4

The HTML5 spec define how to set custom attributes using data-* prefix, like:

<div data-attr="somedata"></div>

But what would be the difference if we write just:

<div attr="somedata"></div>

And I actually prefer the second way since it's shorter.
I can access both attributes using the getAttribute() method.

So is that wrong not using data-* prefix? I tested it only on chrome and IE11, so maybe there are other browsers to worry about?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
user3599803
  • 6,435
  • 17
  • 69
  • 130
  • 4
    the basic reasoning is, that in the future your `attr` might be used as an attribute in the standard. your (probably) non-standard conform usage could then cause any kind of problems. hence the `data-` namespace is created to prevent such collisions. – Sirko Sep 04 '15 at 11:57
  • 1
    This question is similar to : should I prepend my custom attributes with “data-”? http://stackoverflow.com/questions/2450585/why-should-i-prepend-my-custom-attributes-with-data/2451188#2451188 – ckckckc Aug 04 '16 at 04:38
  • 1
    Possible duplicate of [Why should I prepend my custom attributes with "data-"?](https://stackoverflow.com/questions/2450585/why-should-i-prepend-my-custom-attributes-with-data) – leemes Oct 04 '17 at 11:55

1 Answers1

2

HTML5 defines the data-* attributes as valid, while other custom attributes are not. So what?

  • If you run your code through an HTML validator it will look for invalid attributes. Among other things, they could indicate a typo. An HTML5 validator will accept data-* attributes but it isn’t psychic. It has no way of judging which other new attributes are part of the plan.

  • If you create a new attribute, it may not play nicely with future changes in HTML which may coincidentally use the same attribute name for a different purpose. The data-* attributes are exempt from future implementation.

  • A corollary of the above is that including additional libraries which also make arbitrary changes may interfere with your own code.

  • JavaScript cooperates with the data-* attributes by automatically collecting them in a dataset property for each element. If you make up another attribute it won’t be included.

If none of the above points are important to you, then, by all means, use whatever attribute names you like. As regards the last point above, you can always access your own arbitrary attributes using JavaScript’s *Attribute functions which will work just well on any attribute, regardless of its validity.

Speaking of JavaScript, there is no concept of HTML validity for JavaScript, and you can use JavaScript to assign any attribute names you like without fear of the HTML validator police knocking at your door. However, you still run the risk of competing with additional libraries or future implementations.

Manngo
  • 14,066
  • 10
  • 88
  • 110
  • I think they should change the spec, I mean they allowed for webcomponents `*-*` so I think we should also be allowed to choose our own prefix and not be forced to use `data-*` is there any place where this can be proposed? I think this is not hard to add just change the spec and update documentation. – inux Sep 08 '22 at 10:51
  • @inux You could try your luck with https://whatwg.org/, which is where all this comes from. As I said in my answer, you can add your own attributes and prefixes anyway if you don’t need to pass official validation, and some libraries do just that. Even in JavaScript, you can write code to collect your own custom attributes (`document.querySelectorAll('[custom-attribute]'`). The `data-` prefix is only there to bring some order into chaos. – Manngo Sep 08 '22 at 11:07