What characters are allowed (not allowed) in the names of custom data-* attributes?

Question

I am developing a JS plugin for serving of retina images. The attributes that identify these images are supposed to be the following:

data-retina@2x, [email protected], [email protected].

Could you tell me if these attributes are valid? What characters are allowed (not allowed) in the names of custom data-* attributes in HTML and XHTML?

Answer 1

See the definition of the data-* attribute in the W3C HTML5 Recommendation:

• In HTML5, the name must be XML-compatible (and it gets ASCII-lowercased automatically).

• In XHTML5, the name must be XML-compatible and must not contain uppercase ASCII letters.

The definition of XML-compatible says that it

• must not contain : characters
• must match the Name production in the XML 1.0 specification

This Name production lists which characters are allowed.

---

tl;dr: For the part after data-, you may use the following characters:

• 0-9
• a-z
• A-Z (not in XHTML5)
• - _ . ·

• and characters from these Unicode ranges:

  • [#x0300-#x036F] (Combining Diacritical Marks)
  • [#x203F-#x2040] (‿ ⁀)
  • [#xC0-#xD6]
  • [#xD8-#xF6]
  • [#xF8-#x2FF]
  • [#x370-#x37D]
  • [#x37F-#x1FFF]
  • [#x200C-#x200D] (ZERO WIDTH NON-JOINER, ZERO WIDTH JOINER)
  • [#x2070-#x218F]
  • [#x2C00-#x2FEF]
  • [#x3001-#xD7FF]
  • [#xF900-#xFDCF]
  • [#xFDF0-#xFFFD]
  • [#x10000-#xEFFFF]

So the @ (U+0040) is not allowed.