html - are html5 data attributes case insensitive?

Question

I recently noticed that chrome converts data attributes data-* to lower case.

e.g.

<div data-Me="awesome"></div> will be converted to <div data-me="awesome"></div> in Chrome Dev Tools.

When I call the attribute with javascript:

console.log(e.hasAttribute('data-Me'),e.hasAttribute('data-me'));

both return true.

So whats the standard way to name data attributes?

Answer 1

You should always use lowercase characters. Even though some browser do automatically correct mistakes in the markup (that's what Chrome does for you here) it can cause errors and isn't valid HTML5. From MDN:

• the name must not start with xml, whatever case is used for these letters;
• the name must not contain any semicolon (U+003A);
• the name must not contain capital A to Z letters.

EDIT

After some more research I've found this:

All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.