If let’s say I require an <img> to store a certain information(arbitrary snippets of metadata for JS) about that element.
e.g. <img class="slider-img" rel="1" src="image.png" />
So i.e in a slider, I would be able to grab that img with rel="1"
What are some alternatives instead of creating/misusing attributes (xbrowser && backward compatible)?
Here are some I found that’s currently being used:
- HTML5, data-*
- rel attribute
- class/id attribute
- custom attributes (Dojo)
XML allows for whatever you want for your elements.
Check out: http://www.bennadel.com/blog/547-jQuery-Custom-Selectors-Holy-Cow-That-Is-So-Badass-.htm
It might not validate against an HTml5 validator, but it is still valid XML / HTML5. Newer browsers and older browsers work with it, they will just ignore what they don’t know.
Another SO post on it: Is it OK to add your own attributes to HTML elements?