0

Like the title says, is there any reason I can't create arbitrary names for my own attributes?

Veverke
  • 9,208
  • 4
  • 51
  • 95
BVernon
  • 3,205
  • 5
  • 28
  • 64
  • 1
    Besides a desire to keep your HTML valid? No. – Heretic Monkey Apr 05 '21 at 17:32
  • 2
    Future-proof comes out of mind. If you use a random name and a latter version of HTML happens to include it, your page is suddenly changed in an unexpected way. Data attributes are guarranted to remain application-specific. – Alejandro Apr 05 '21 at 17:32
  • Search engines might penalise you if the site uses unknown tags and attributes, too. Data prevents that, if that's the case. – Alejandro Apr 05 '21 at 17:34
  • They also won't make a validator choke. – Spectric Apr 05 '21 at 17:35
  • If other devs work with your codebase, it would be easier for them. Since using `data-` is a well known standard. – Tom Bombadil Apr 05 '21 at 17:36
  • Good points, but @Alejandro on future proofing it's no different with data-attributes as you may use some other js library that used the same ones you did. Of all the concerns, this one is the least of them to me. Supposing a conflict "did" happen here, it would be a simple matter of using find/replace to update and if you have a really large application it might, you know, take an hour. More likely it will take you less than 10 minutes plus time to test. – BVernon Apr 05 '21 at 18:03
  • @BVernon I strongly disagree con your optimism about fix time for such a conflict :) I find it difficult to even know that a conflict happened in the first place. Good point about libraries, didn't even consider that as a chance. – Alejandro Apr 05 '21 at 18:10

1 Answers1

4

Yes.

MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

  1. Clean "namespace": You don't need to restrict yourself about which attributes you can use. data-bgcolor is safe to use, bgcolor is not.

  2. Semantics: The way data and non-data attributes are accessed is different. Usually, attributes will be retrieved using el.getAttribute("value"), while data attributes will be access with el.dataset.value. This is no confusion about what the attribute does (is it visual or not).

  3. It's standard: HTML5 declares a specific set of valid attributes. Going against standards should generally be avoided.

Slava Knyazev
  • 5,377
  • 1
  • 22
  • 43
  • I really don't care about 1) and 3) (I just mean I've never been one to follow rules based on "just because" reasoning), but point 2 is compelling... actually I didn't even know you could do that, so thanks! – BVernon Apr 05 '21 at 18:12