Do html5 data attributes need a value? [duplicate]

Question

I am wondering if html data attributes actually need a value to be applied?

I wonder this because often all we want to know is if the attribute is actually set to act as a flag. (sure we could use a class for this; but realistically unless you are going to style these items differently then the flags are more data than a semantic item).

A perfect example of this is if we want a link to scroll to it's target instead of jumping our jQuery code might look like:

$(document).on('click', '[data-scroll-link'], function(){/**do scroll**/});

I know in google chrome it is sufficient for the anchor to appear as

<a href="#bottom" data-scroll-link>Scroll to bottom</a>

But will that work everywhere? and is it even valid HTML5 (I believe it is due to the autofocus, autoplay etc attributes). or do we need:

<a href="#bottom" data-scroll-link="true">Scroll to bottom</a>

Hokku

Not sure about browser compatibility for your shortcut notation, but I would personally prefer the <a href="#bottom" data-scroll-link="true">Scroll to bottom</a> format as it's more explicit. That way a true/false value determines if this attribute applies to the element - rather than the presence or absence of it. – Stretto

To know the value is better than the default value. – Regionalism

Answer 1

No. But...

As is common with all attributes, in the application/xhtml+xml serialisation, XML rules apply and the attribute must have an explicit name and (quoted) value.

So this question is really about the text/html serialisation, and therefore the relevant part of the HTML5 spec is Section 8 The HTML syntax

In particular, under attributes, it says:

Attributes can be specified in four different ways:

where the first of these is:

Empty attribute syntax

   Just the attribute name. The value is implicitly the empty string.

It's necessary to understand though that the value is of string type, not of boolean type.

For example, with <input id="cb" type="checkbox" checked>, the "checked" attribute is reflected by a property that is either true or false. So

if (document.getElementById("cb").checked)

will evaluate to true for the above markup.

In contrast, with <input id="cb" type="checkbox" data-checked>, the "data-checked" attribute is reflected via the dataset object as a string. The value of this property is the empty string, which in JavaScript is falsey. So,

if (document.getElementById("cb").dataset.checked)

will evaluate to false for the above markup.

To do the equivalent test, compare the value for "not undefined". I.e.

if (document.getElementById("cb").dataset.checked !== undefined)

will evaluate to true for the above markup.

See http://jsfiddle.net/GAxvW/

Idiotism

Answer 2

Simple Boolean Test For Element Attributes

To expand on Alohci's excellent answer, the following is a simple, flexible way to test for a true boolean attribute value supplied using one of three standard HTML conventions: <foo data-bar/>, <foo data-bar="true"/>, or <foo data-bar="data-bar"/>.

var a = elem['data-bar'];
var aTrue = ( a != null && a !== false && a !== 0 && a.charAt(0) != 'f' &&
              a.charAt(0) != 'n' );

With the code above, the value is false if undefined or set to one of: f*, n*, 0 (case-insensitive), and true if defined and set to one of: (empty string), (attribute name), (anything else).

Empty strings are evaluated to true here because HTML attributes without values are '' which equal false in JS (and something like <foo disabled/> should equal <foo disabled="true"/>). You can use the above code for more general string testing by removing != null && a !== false.

Deodand

Please note that we expect answers to address the specific issues in the question. Please be sure to pay close attention to what language, platform, libraries, etc are being used, and be sure to look for solutions to the precise problem. – Chongchoo

@AndrewBarber Thanks Andrew. I apologize if my answer was too off-topic, and I'll be more careful in the future. I intended this as an extension of Alohci's answer, which made the important point that the interpretation of a flag-like HTML attribute can vary wildly in JavaScript. I thought it would be helpful to stress this point and provide a helpful example if Hailwood (and others stumbling upon this) intended to integrate attribute-value-less booleans in their HTML elements. – Deodand

@Deodand I understand that this does not directly answer the question, but provides a good extension to Alohci's answer, as clearly stated at the beginning of the answer. This could be improved if you can add a clear example in code block utilising the aTrue logic to finish of the explanation of the logic you put at the top. – Inevasible