40

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?

Improve this question
2
  • krangsquared.blogspot.com/2013/05/… xenforo.com/community/threads/… Commented Jul 30, 2014 at 9:33
  • 2
    Chrome is required to do that conversion by the HTML5 spec. All browsers with HTML5 compliant parsers must make that conversion. It is all quite normal and valid. The HTML5 spec says "In the HTML syntax, attribute names ... may be written with any mix of lower- and uppercase letters that are an ASCII case-insensitive match for the attribute's name." Commented Jul 30, 2014 at 21:09

2 Answers 2

Reset to default
49

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

If <div data-Me="awesome"></div> is not HTML5 valid, why don't validators report it as an error?
@Alohci Because you shouldn't take the validator to serious (I guess you've used the W3C validator). It's not always up-to-date. Reading the official specs is always better.
16

HTML5 tags and attributes ARE case INsensitive.

It makes no sense to get information from browser vendors. Instead, you should get that information directly from the source (W3C standards): http://w3c.github.io/html-reference/documents.html#case-insensitivity

You can either use XHTML or HTML5. From a web page loading point of view only HTML5 makes sense currently.

In documents in the HTML syntax: • Tag names for HTML elements may be written with any mix of lowercase and uppercase letters that are a case-insensitive match for the names of the elements given in the HTML elements section of this document; that is, tag names are case-insensitive. • Attribute names for HTML elements may be written with any mix of lowercase and uppercase letters that are a case-insensitive match for the names of the attributes given in the HTML elements section of this document; that is, attribute names are case-insensitive.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.