Are empty HTML5 data attributes valid?

38,794

Solution 1

Valid, but they aren't boolean.

Custom data attributes specification doesn't mention any changes to empty attributes handling, so the general rules about empty attributes apply here:

Certain attributes may be specified by providing just the attribute name, with no value.

In the following example, the disabled attribute is given with the empty attribute syntax:
<input disabled>
Note that empty attribute syntax is exactly equivalent to specifying the empty string as the value for the attribute, as in the following example.
<input disabled="">

So you are allowed to use empty custom data attributes, but special handling is needed to use them as boolean.

When you are accessing an empty attribute, its value is "". Since it's a falsy value, you can't just use if (element.dataset.myattr) to check whether an attribute is present.

You should use element.hasAttribute('myattr') or if (element.dataset.myattr !== undefined) instead.

Lloyd's answer is wrong. He mentions link to boolean attributes microsyntax, but data-* attributes are not specified as boolean in the spec.

Solution 2

Yes, perfectly valid. In your case, data-modal-target would represent a boolean attribute:

2.4.2 Boolean attributes

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

Solution 3

On one hand, it passes the validator 16.5.7 https://validator.w3.org/nu/#textarea :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>a</title>
</head>
<body data-asdf>
</body>
</html>

On the other, HTML5 does not say in the specification of data- attributes that they are boolean: https://www.w3.org/TR/html5/dom.html#custom-data-attribute while it says that very clearly for other boolean attributes like checked https://www.w3.org/TR/html5/forms.html#attr-input-checked

Solution 4

Yes, it is valid syntax to omit value for a custom data attribute.

"Attributes can be specified in four different ways:

Empty attribute syntax Just the attribute name. The value is implicitly the empty string. [...]" https://developers.whatwg.org/syntax.html#attributes-0

View more solutions

38,794

Author by

Adam Biggs

Updated on November 24, 2021

Comments

Adam Biggs over 2 years
I'd like to write a simple jQuery plugin that displays inline modals under specified elements. My idea is for the script to auto-init based on data attributes specified on elements.

A very basic example:
```
<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"></div>
```
I'm just wondering if data-modal-target in the above example is valid, or does it have to be data-modal-target="true"? I don't care about anything crappier than IE9 etc, my only requirement is that it be valid HTML5.
- goodeye about 11 years
  
  I couldn't find where custom data attributes require a value or not; and am still unsure whether to omit the value, or just include it to be safe. The W3C spec is confusing (no surprise). I think it may depend on the script using the values. (comment example continued below, due to length limit).
- goodeye about 11 years
  
  e.g., I'm using a plug-in that has custom data attributes with default values: some strings, some booleans (leading me to look for this question). The boolean data has a mix of whether the default is true or false; it's doing the checking to see if it exists or has a value. It's checking if value is either true or empty (for true), or false. But the check for empty is explicit in the code; it's not "built-in". And, it's not checking for the attribute name, like data-abc="data-abc" as a boolean attribute requires; this causes an error.
Adam Biggs over 12 years

Nice! Thanks for the link, I usually don't have the patience to wade through w3.org :)
Lloyd over 12 years

oh, me neither - i just happened to know this from regular use of the HTML5 audio element which uses a boolean attribute (controls)
goodeye about 11 years

I don't know omitting the value "turns it into" a boolean attribute - it seems that the boolean attributes aren't arbitrary; I think there's a list of them. Maybe it doesn't matter if it's treated as a boolean or custom data by the browser/script; but maybe it depends on the script reading it.
Derek Henderson over 10 years

I believe this has changed. Certainly the example I am using in my code is not being treated as a boolean but rather as an empty string. So, testing if ($('p').data('modal-target')) won't work: stackoverflow.com/questions/16864999/….
H1D over 10 years

looks like this is not true element.dataset.modalTarget would produce empty string which is falsy (Chrome 32) same result with jQuery
xr280xr about 9 years

How would you determine if data-modal-target exists using jQuery? The value is "" which is a falsy
BoltClock about 9 years

This seems to be a misinterpretation of the spec. The section you link to describes Boolean attributes, but does not say if custom data attributes can be Boolean attributes.
sfarbota almost 4 years

"Note that empty attribute syntax is exactly equivalent to specifying the empty string as the value for the attribute, as in the following example." is exactly what I was searching for. Specifically, jQuery's scriptAttrs setting doesn't like a plain defer value, but a defer: "" should do the trick. Thanks!
Harsh Chiki over 3 years

It also says just before "Attributes have a name and a value." It doesn't say "Attributes have a name and an OPTIONAL value."
Admin about 3 years

If You want to obtain a Boolean property onto HTMLElement You can define a custom getter using hasAttribute. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Peter Perháč over 2 years

the link no longer links to the correct place - this is the section on boolean attributes now html.spec.whatwg.org/multipage/…
Lloyd over 2 years

fixed, thanks @PeterPerháč
Jim U over 2 years

The value is not optional: "The value is implicitly the empty string."