Question

I was reading something about boolean attribute here, which says that for a boolean attribute (in this particular example, loop attribute of <audio>), whatever value you set, it is going to be recognized as “true”. In order to really set to falsy, you cannot set it like loop=false or with javascript as ['loop']=false, but have to remove the attribute such as by doing removeAttribute('loop'). Is this true?

I first believed it, but as far as checked it with Chrome, it seems that setting to ['loop']=false will actually do make it be recognized as falsy. I am not sure how robust this fact is when considered cross-browserly. Is there any difference among browsers?

Answer 1

Boolean attributes are explained here:

http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2

Some attributes play the role of boolean variables (e.g., the selected
attribute for the OPTION element). Their appearance in the start tag
of an element implies that the value of the attribute is “true”. Their
absence implies a value of “false”.

Boolean attributes may legally take a single value: the name of the
attribute itself (e.g., selected=”selected”).

So, while some browsers may interpret the string “false” as if the value was not set, others may not decide to (which is the correct behavior). Actually, as far as I know (or thought), any non-empty string usually sets the value to on/true (regardless of what the spec says is a legal value). I believe this is also undefined behavior, so this may change as well or be different from browser to browser (don’t rely on it).

The bottom line is, just because a browser or two may deviate from the spec doesn’t mean that you should. Removing the attribute entirely is the way to go.

Addendum: Looking at your comments and question a little closer, I think you may be confused about attribute values in general. In HTML, attr=false and attr="false" are exactly the same. Quotes are not required in any version of HTML (unless they are needed to remove ambiguity when the value contains spaces). For instance:

<input class=required>
<!-- This is fine -->

<input class=title required>
<!-- this is fine too, but "required" will be parsed as an attribute -->

<input class="title required">
<!-- To have two classes, we need the quotes -->

All attribute values (on elements that have them) are treated as strings. In other words, there is no such thing as a true boolean value (or NULL value) in HTML like there is in javascript.