Is it bad practice to make up my own html attributes?

Question

I have been playing around with custom html attributes, for item-id's and things like that, and using it to make my code more readable (for me). It's a decent enough trick, but I could just as easily user data-id attribute instead. I just was wondering if there is a legitimate reason why it would be bad to do something like that.

Example:

<input type="submit" value="submit" custom-item-id="137" />

Thanks!

and [Is it considered bad practice to use non-standard HTML attributes?](http://stackoverflow.com/questions/2117933/is-it-considered-bad-practice-to-use-non-standard-html-attributes?rq=1) — Felix Kling, Jan 20 '14 at 19:34
and [Is it bad practice to add non standard attributes to DOM elements? - HTML/Javascript](http://stackoverflow.com/questions/4909527/is-it-bad-practice-to-add-non-standard-attributes-to-dom-elements-html-javasc?rq=1) — Felix Kling, Jan 20 '14 at 19:35
*"I just was wondering if there is a legitimate reason why it would be bad to do something like that."* You are producing invalid HTML, which is already reason enough to avoid it. Also, future iterations of the HTML standard might introduce an attribute with the same name but different meaning, which might break your code. — Felix Kling, Jan 20 '14 at 19:38

score 4 · Accepted Answer · answered Jan 20 '14 at 19:35

4

You'll want to do something like data-* for custom attributes. jQuery has functionality built in to handle these attributes, and it is the standard.

< input type="submit" value="submit" data-custom-item-id="137" />

Here is a blog post discussing data attributes: http://ejohn.org/blog/html-5-data-attributes/

answered Jan 20 '14 at 19:35

Jordan Foreman

3,848
7
40
65

Thx for the reply, but I just was wondering why its ok to use data-XXX and not just make up my own attributes. Is it just a convention, or will this break cross-browser-compatibility or something like that? – OneThreeSeven Jan 20 '14 at 21:07
Its not just a convention - its actually in the HTML5 spec and is intended for whenever you would need a custom html attribute - http://www.w3.org/html/wg/drafts/html/master/dom.html#attributes – Jordan Foreman Jan 21 '14 at 00:18

score 3 · Answer 2 · answered Jan 20 '14 at 19:34

You can create your own attributes if you prefix them with data-:

 <input type="submit" value="submit" data-item-id="137" />

Even jQuery support this with a built-in method, which allows to get attributes with data() function ($('input').data('item-id') in this example)

W3C Reference:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

@TimothyL.J.Stewart It just says the string after `data-` must respect XML naming format (ascii letters, number but not at the beginning, dashes, etc.) with the "XML compatible" mention (there is a link on the doc on the term) BUT disallow the usage of capital letter, which are authorized in XML compatible tag/attribute — Maxime Lorant, Jun 09 '17 at 09:07

Is it bad practice to make up my own html attributes?

2 Answers2