Menu
I tried to use data-userId, but firebug shows it as data-userid (with a lowercase "i").
It seems that we should not use uppercase letters in custom data attributes.
What is the naming rules for HTML5 custom data attributes?
Please let me know any best practices to use it.
350
The data-* attribute consist of two parts: The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-" The attribute value can be any string.
Custom attributes are attributes that are not part of the standard HTML5 attributes but are explicitly created. They allow us to add our own information to HTML tags. These are not specific and can be used with all the HTML elements.
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.
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.
Straight from the spec:
3.2.3.9 Embedding custom non-visible data with the
data-*attributesA 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
Nameproduction 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)*
178
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
