Menu
I'm creating some custom data-* attributes in my site and I am having a hard time reading the Spec Here and Here.
I can tell [a-z], [0-9] and '-' are allowed but I can't decipher anything more from that.
I also think "A-Z" will automatically converted to lower ( Spec link 1) before being processed but it mentions not using them. ( Spec link 2)
1) What characters are allowed and not allowed in a custom data-* attribute?
2) Are special characters like '_', '!', '$', etc. allowed?
Thanks.
805
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.
HTML elements all have names that only use characters in the range U+0030 DIGIT ZERO (0) to U+0039 DIGIT NINE (9), U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z, and U+0041 LATIN CAPITAL LETTER A to U+005A LATIN CAPITAL LETTER Z.
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.
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.
From your spec link 2, the allowed characters come from the Name production in XML, which is, given that the attribute already starts with data-
":" | [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] | "-" |
"." | [0-9] | #xB7 | [#x0300-#x036F] | [#x203F-#x2040]
_ is explicitly listed as OK
! (#x21) and $ (#x24) are not allowed
Spec link 1 is irrelevant. That's for user-agents, to describe how the characters should be processed, regardless of whether they are valid or not.
69
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
