On the topic of
data-* attributes, the HTML specification states clearly that:
“These attributes are not intended for use by software that is independent of the site that
uses the attributes.” Put differently, that means that they are intended as hooks for your
own site to make use of, typically through included scripts, and not to convey broader
semantics that might be interpreted by third parties.
People often interpret that as a big no-no, and admit to having used them in their vernacular with a notable tinge of shame. In practice, things are a little bit fuzzier. Note that this is not a normative part of HTML, it is open to interpretation.
If you are building a vernacular intended to become a relatively formal standard shared by
a large community, that is definitely sound advice. For starters, why bother with the
data- prefix in this case when you could have shorter, nicer attribute names?
At the other end of the spectrum if you are creating a simple language that can be used with
a JS library people might include in their sites, you’re definitely safe: go ahead and use
data-* as much as you please.
In between those two extremes things are a little greyer. Clearly, if there is another
attribute you could use, you should not use a
data-* attribute — but then
that applies in all cases. A good rule of thumb is that if what is contained in that
attribute may possibly be used by a processor that is not specifically designed to
consume your vernacular (say, a general-purpose processor such as a search engine crawler or
an accessibility tool) then you do not want to be using
you’re probably okay.
↖︎ Back to list