Are empty HTML data attributes valid?

Question

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"><!-- any desired syntax can go here --></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 HTML.

Myron

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). – Haldi

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. – Haldi

Answer 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.

Nakada

"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! – Bagehot

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/… – Cockchafer

element.hasAttribute('data-myattr') – Grandma

Answer 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.

Rhoden

Nice! Thanks for the link, I usually don't have the patience to wade through w3.org :) – Myron

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

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. – Haldi

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: #16865499. – Gracielagracile

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

How would you determine if data-modal-target exists using jQuery? The value is "" which is a falsy – Christianachristiane

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. – Saideman

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

fixed, thanks @PeterPerháč – Rhoden

Answer 3

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

Worry

It also says just before "Attributes have a name and a value." It doesn't say "Attributes have a name and an OPTIONAL value." – Whereupon

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

Answer 4

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

Polyurethane