Naming rules for HTML5 custom data attribute(data-)

Straight from the spec:

3.2.3.9 Embedding custom non-visible data with the data-* attributes

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

(emphasis added)

---

What does XML-compatible mean?

Attribute names are said to be XML-compatible if they match the Name production defined in XML and they contain no U+003A COLON characters (:).

What is the Name production rule?

[4] NameStartChar ::= ":" | [A-Z] | "_" | [a-z] | [#xC0-#xD6] | [#xD8-#xF6] | [#xF8-#x2FF] | [#x370-#x37D] | [#x37F-#x1FFF] | [#x200C-#x200D] | [#x2070-#x218F] | [#x2C00-#x2FEF] | [#x3001-#xD7FF] | [#xF900-#xFDCF] | [#xFDF0-#xFFFD] | [#x10000-#xEFFFF]
[4a] NameChar ::= NameStartChar | "-" | "." | [0-9] | #xB7 | [#x0300-#x036F] | [#x203F-#x2040]
[5] Name ::= NameStartChar (NameChar)*

The data attribute name must be at least one character long and must be prefixed with 'data-'. It should not contain any uppercase letters.

The name of a data attribute must begin with the string ‘data-’ and must contain at least one character after the hyphen using any HTML naming convention.

Reference HTML5 Data

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

Complete guidelines can be found in the W3 Recommendation.

I don't know which rule is that, I haven't found it in specs from above post but if you want to get camelCase data item using jquery data('userId') you have to add attribute data-user-id='xx'