How browsers handle invalid/unspecified attributes on HTML elements?

html, javascript, jquery, web

Solution

Browsers won't complain about unrecognized attributes, and Javascript and jQuery will still be able to access them:

console.log( $('#blah').attr('myattribute') ); // something
console.log( document.getElementById('blah').getAttribute('myattribute') ); // something

However you should use the HTML5 `data-*` attribute which is specifically for the purpose of custom attributes. jQuery has the `data()` method for accessing/setting them:

<div id="blah" data-myattribute="something">whatever</div>

<script>
console.log( $('#blah').data('myattribute') ); // something
</script>

Problem

For examlpe, if I have this: ``` <div id="blah" myattribute="something">whatever</div> ``` Can I be safe that no browsers will ignore (and thus render inaccessible from legacy JavaScript) the `myattribute`? I am aware that this is ugly and not standard, but is quite useful. Or if they do, would jQuery still be able to get them?

Original source