Are empty HTML5 data attributes valid?
HtmlCustom Data-AttributeHtml5 DataHtml Problem Overview
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 HTML5.
Html Solutions
Solution 1 - Html
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 2 - Html
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:
>
>
>
> Note that empty attribute syntax is exactly equivalent to specifying the empty string as the value for the attribute, as in the following example.
>
>
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 3 - Html
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
Solution 4 - Html
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