Skip to main content

Day 47 of 100DaysOfSpec, data-* attributes

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

Currently reading in 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.”

To review, these custom attributes allow you to store data that you might use in Javascript, for example, and you can guarantee that user agents won’t—at least, aren’t allowed to—add any future attributes starting in “data-”.

There is an element.dataset object that contains an element’s data- attributes (name-value pairs). Hyphenated data attributes become camelCase in the returned object.

The algorithms that manipulate the data attributes or their content basically undo all the work that the user agent does in creating the dataset object (insert "data-" back in, convert back to hyphenation from camelCase).

These data- attributes are super useful and powerful, but web devs are supposed to build their pages to be functional without the attributes (which, in a way, in practice is sort of like saying “without Javascript” since you’re probably adding data- attributes for use with a scripting language).


My blog uses Webmentions. Responses from Mastodon and other sites that send Webmentions will show up here.

No Webmentions have been sent to this post yet.