Is there any difference for data-attribute=false with data-attribute="false" in html element?

Question

I have data attribute in html element as <button data-verified=false>Update</button>. It have boolean value for data attribute.

Is there any difference with following element <button data-verified="false">Update</button> as the data-attribute is wrapped with double quotes.

Is boolean values are supported in html?

Alohci · Accepted Answer · 2013-06-06T12:24:56.020

4

Boolean attributes are supported in HTML, but data-verified isn't one of them, no matter how it appears in the markup. data-verified=false and data-verified="false" both create an attribute of the type string and value "false", which if tested in JS as a boolean will be treated as true

This is only the case because false doesn't contain spaces. As a contrary example, data-verified=not true is invalid and not at all the same as data-verified="not true"

edited Jun 06 '13 at 12:24

answered Jun 06 '13 at 11:58

Alohci

78,296
16
112
156

Is there any difference when dealing in javascript `if (!$('button').data('verified'))`? – Justin John Jun 06 '13 at 12:01
@JustinJohn - No difference in JS. Libraries may do weird things, but the attribute with or without quotes will always be treated the same, since the JS will see only the DOM, not the original mark up. The DOMs are guaranteed to be identical. – Alohci Jun 06 '13 at 12:09

score 3 · Answer 2 · edited May 23 '17 at 12:10

3

There are no differences in the values - however, always prefer to quote around attribute values, because:

Looks cleaner
Easier to maintain
Every editor can deal with it easily
It's a standard, nearly all HTML code examples you'll see use the value quoted

My answer corroborates from Do you quote HTML5 attributes?

edited May 23 '17 at 12:10

Community

1
1

answered Jun 06 '13 at 11:58

gustavohenke

40,997
14
121
129

score 0 · Answer 3 · answered Jun 06 '13 at 11:59

0

I think it is just a convention that attributes always have double quotes.

However. In jQuery, you can use the .data() method. It is smart enough to recognize booleans and numeric values.

answered Jun 06 '13 at 11:59

Wouter Vandersyppe

31
1
7

score 0 · Answer 4 · answered Jun 06 '13 at 13:22

The only difference is that only the latter is allowed in XHTML. In HTML syntax, they both are allowed, and they are equivalent: the difference is lost when the HTML markup is parsed, and the DOM contains in both cases only the string false.

This follows from general principles in HTML and does not depend on the name of the attribute in any way.

“Boolean value” is a vague term. In HTML5, some attributes are called “boolean attributes”, but this is strongly misleading – especially since values true and false, far from being the only values allowed, aren’t allowed at all for such values. You need to read the specification of “boolean attributes” to see what they really are.

When you use data-* attributes, it is completely up to you what you use as values and how you process them.

Is there any difference for data-attribute=false with data-attribute="false" in html element?

4 Answers4