HTML - Why Boolean Attributes Do Not Have Boolean Value

HTML - Why boolean attributes do not have boolean value?

In SGML, an attribute may be minimized so that its value alone is short for both the name and the value, with the only possible value for the attribute in this case obviously being the attribute's own name. HTML uses this for boolean attributes, where the presence or absence of the attribute is what's meaningful, and its value is irrelevant. But in XML, minimized attributes were disallowed, so we wound up with the awkwardness that is selected="selected" when XHTML came into vogue. If you're writing HTML rather than XHTML, you can just write selected.

Boolean Attributes Of Html

Check the HTML standard for any questions of syntax. To quote it:

A number of attributes are 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.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

Here is an example of a checkbox that is checked and disabled. The
checked and disabled attributes are the boolean attributes.

<label><input type=checkbox checked name=cheese disabled> Cheese</label>

This could be equivalently written as this:

<label><input type=checkbox checked=checked name=cheese disabled=disabled> Cheese</label>

You can also mix styles; the
following is still equivalent:

<label><input type='checkbox' checked name=cheese disabled=""> Cheese</label>

Why is the true boolean value the wrong attribute value?

According to the HTML5 spec:

A number of attributes in HTML5 are 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.

If the attribute is present, its value must either be the empty string
or a value that is a case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace.

So with a boolean attribute like disabled, it's presence alone is enough and it needs no value, although virtually every web browser will still accept it. Therefore, you should use either disabled (alone) or disabled="disabled"

What does it mean in HTML 5 when an attribute is a boolean attribute?

2.5.2 Boolean attributes

A number of attributes are 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.

If the attribute is present, its value must either be the empty string
or a value that is an ASCII case-insensitive match for the attribute's
canonical name, with no leading or trailing whitespace.

The values "true" and "false" are not allowed on boolean attributes.
To represent a false value, the attribute has to be omitted
altogether.

are attributes without value allowed in HTML4?

Boolean Attributes, Yes they are completely valid.

From W3C: (On SGML & HTML)

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").

This states that Boolean attributes are valid in HTML4 as well, but if you use something like, would be invalid.. because that boolean belongs to option tag.. Thanks to @Ronni Skansing for clarifying the doubt..

<p selected>Hello</p>

HTML5 Docs :

From W3C :

Empty Attribute Syntax

Certain attributes may be specified by providing just the attribute
name, with no value.

From W3C: (HTML 5.1 Nightly )

A number of attributes are 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.

BUT

section is an invalid attribute, if you want to define your own attributes, HTML5 provides a way to do that.. you need to use data- prefix, for example, your section should be written as data-section, this way your attribute will be counted as valid.

If you hesitate to do so, we always have a validator to check - W3C Markup Validation Service

^{^ Validated As HTML5}

NOTE: Though I provided data- is applicable for HTML5, using custom
attributes in HTML4 is invalid, no matter even if you define data-
before the attribute name, but, boolean attributes are valid in HTML4
as well.

How does html/javascript know an attribute is a boolean and not a string

Plain JS does not parse "false" as false, "true" is truthy so it could conceivably end up as 1

jQuery however parses the data-attribute as boolean for true/false strings

console.log(typeof document.querySelector("[data-is_male]").getAttribute("data-is_male"))
console.log(typeof $("[data-is_male]").data("is_male"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a href="#;" data-is_male="true">Male</a><a href="#;" data-is_male="false">Female</a>

Boolean HTML Attributes

(Because of some framework code I use, not calling setAttribute(), or calling removeAttribute() is difficult.)

Then I would submit that the framework code needs fixing, or dumping.

You can't setAttribute to unset an attribute, by design. Any solution you found involving out-of-band values like ‘null’, if it happened to work in any particular browser, would be quite invalid according to the DOM Core standard.

setAttribute() is in any case best avoided in browser (non-XML) HTML contexts. IE pre-8 doesn't know the difference between a DOM attribute and a JavaScript property, which can easily result in many really weird problems. If you're trying to set ‘checked’ as an attribute (which theoretically you should do by setting it to the string "checked"), don't expect IE to co-operate.

The full list of boolean attributes in HTML 4.01 (and hence XHTML 1.0) is (with property names where they differ in case):

checked             (input type=checkbox/radio)
selected            (option)
disabled            (input, textarea, button, select, option, optgroup)
readonly            (input type=text/password, textarea)
multiple            (select,input)
ismap     isMap     (img, input type=image)

defer               (script)
declare             (object; never used)
noresize  noResize  (frame)
nowrap    noWrap    (td, th; deprecated)
noshade   noShade   (hr; deprecated)
compact             (ul, ol, dl, menu, dir; deprecated)

Is there a thing such as custom boolean attributes in HTML?

For DOM properties like checked, selected, disabled or hidden , you will get boolean value

$("div").attr("data-intrusive");

.attr() will get the value of attribute and not the boolean value.
.attr() will try to get value of data-intrusive and if you observe the value of the data-intrusive in the DOM it is empty string

<div data-intrusive="">1</div>

.prop() will return Boolean value for boolean attributes and property value for all other attributes

For example consider below example

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-intrusive style="color:red" hidden>1</div>

JS:

console.log($("div")[0].outerHTML) //output- <div data-intrusive="" style="color:red" hidden="">1</div>

console.log($("div").prop('style'));// output-CSSStyleDeclaration {0: "color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: ""…}
console.log($("div").attr('style'));//output- color:red

console.log($("div").prop('hidden'));//true
console.log($("div").attr('hidden'));//hidden

console.log($("div").attr('data-intrusive'));//empty string as expected
console.log($("div").prop('data-intrusive'));//undefined as expected, as there is no property value

To get expected result, use hasAttribute('data-intrusive') for string values or set property for data-intrusive to boolean value to get .prop('data-intrusive') value as boolean

//if it is a string value
console.log($("div")[0].hasAttribute('data-intrusive'));

//if it is boolean ,then it is return the same
$("div").prop('data-intrusive','fasle');
console.log($("div").prop('data-intrusive'));

Codepen -
http://codepen.io/nagasai/pen/VjgNwx

MVC4: HTML5 boolean attributes rendered with True/False value

You can include conditionally rendered attributes like this:

<input 
    type="radio"
    required="@(!Model.BooleanValue)"
    disabled="@Model.BooleanValue" />

The solution was pretty strange. While doing some tests, I put an @if in the HTML input tag. This if was used to show the required attribute. After this @if, I put the disabled="@Model.BooleanValue" attribute.

It seems that this order disrupted the expected behaviour. Placing the disabled attribute before the @if solved the problem (later I have deleted the @if and converted it to required="@(!Model.BooleanValue)").

Related Topics