Write Valid HTML
Or: How I Learned to Stop Worrying
and Prefix my Custom Attributes with “data-”
The Robustness Principle
Be conservative in what you produce.
Be liberal in what you accept.
Why Validate?
W3 says:
- Debugging tool
- Future-proof quality check
- Eases Maintenance
- Teaches good practices
- Sign of professionalism
Reference
(Disclaimer)
Functionality always trumps validation.
So take this all with a large grain of salt.
Custom Attributes
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.
These attributes are not intended for use by software that is independent of the site that uses the attributes.
- WHATWG Spec
<div class="user" data-updated="2014-03-11" data-anim="slide">...</div>
Learn More
“But I don't wanna put 'Data-'
on my custom attributes.
It works fine without them.”
Just Do it
DataSet
<div class="user" data-updated="2014-03-11" data-anim="slide">...</div>
el.dataset returns:{ updated: "2014-03-11", anim: "slide"}
Just Do It
Clarity
<input type="file" accept="image/*" data-loaded="nextStep" />
^ definitely native ^ definitely custom
Because I haven't memorized this list:
accept accept-charset accesskey action align alt async autocomplete autofocus autoplay bgcolor border buffered challenge charset checked cite class code codebase color cols colspan content contenteditable contextmenu controls coords data datetime default defer dir dirname disabled download draggable dropzone enctype for form headers height hidden high href hreflang http-equiv icon id ismap itemprop keytype kind label lang language list loop low manifest max maxlength media method min multiple name novalidate open optimum pattern ping placeholder poster preload pubdate radiogroup readonly rel required reversed rows rowspan sandbox spellcheck scope scoped seamless selected shape size sizes span src srcdoc srclang start step style summary tabindex target title type usemap value width wrap
Just Do It
Guaranteed Future Compatibility
Today:
accept accept-charset accesskey action align alt async autocomplete ...
Tomorrow:
All of today's attributes plus: ???
That's 3 Good Reasons
-
Dataset
-
Clarity
-
Guaranteed Future Compatibility
Vs
?
Robustness
Be conservative in what you produce.
Be liberal in what you accept.
