I came across a nice little problem today. I wanted to use the HTML5 data attribute with jQuery. You can add any kind of data as attributes to any DOM element, using the prefix data-.
You can then use that data client side using JavaScript, which is handy for lots of different situations. Today I could not get this to work. My attribute was named so:
data-projectUrlAfter a lot of frustration, the issue was resolved as caused by the upper case U in Url. The specification does not allow this, unless it follows a hyphen.
From the HTML5 specification you will see the following:
-
For each content attribute on the element whose first five characters are the string “data-” and whose remaining characters (if any) do not include any characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z), add a name-value pair to list whose name is the attribute’s name with the first five characters removed and whose value is the attribute’s value.
-
For each name on the list, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by a character in the range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z), remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character converted to ASCII uppercase.
Here is an example: