Menu
I want to associate some custom data with some HTML nodes. I was going to use the new HTML5 style 'data-*' attributes. e.g.: <tr class="foo" data-typeid="7">…, and then I was going to select this HTML node and show/hide it etc. by reading the value with $(node).attr("data-typeid").
However this web page needs to work with older browsers aswell. I'm not using the data-* attribute as a special attribute, but I'd like to know if older browsers will ignore, wipe, or make inaccessible this attribute since it's not valid HTML4.
606
data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.
In short, a data attribute is a single-value descriptor for a data point or data object. It exists most often as a column in a data table, but can also refer to special formatting or functionality for objects in programming languages such as Python.
If you want to define your own custom attributes in HTML, you can implement them through data-* format. * can be replaced by any of your names to specify specific data to an element and target it in CSS, JavaScript, or jQuery.
data-testid is an attribute used to identify a DOM node for testing purposes. It should be used as a handler to the test code.
There isn't really, they're not 100% correct/valid usage in HTML4 of course....but they don't cause problems either, so they're still a great way to solve the "I need an attribute for this" problem.
If it helps, I've used these while supporting IE6 and have had zero issues thus far, and I can't recall a single SO question reporting any either.
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
