True or false html code

Post from May 19, 2020 (↻ July 14, 2023), filed under Web Development (feed). There are Boolean attributes in HTML and, unless I err somewhere, there are two dozen of them. Here’s a quick rundown of what makes for a Boolean attribute, and what Boolean attributes there are in current HTML. What is a Boolean at all? Citing the The Web Development Glossary , a Boolean is “a data type that has one of two possible values (usually denoted true and false).” What is a Boolean attribute? A Boolean attribute is an attribute that can only be true or false. How does a Boolean attribute work? According to the HTML specification:

The presence of a boolean attribute on an element represents the “true” value, and the absence of the attribute represents the “false” value.

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

The Boolean Attributes

Update (October 21, 2022)

The list now strictly follows the HTML specification’s attributes overview. That means it doesn’t contain Boolean attributes found on legacy and obsolete elements anymore, like truespeed .

About Me

I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for Google, I’m close to W3C and WHATWG, and I write and review books for O’Reilly. I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!

Looking for a way to comment? Comments have been disabled, unfortunately.

Get a good look at web development? Try The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

You are here: Home → Archive → 2020 → The 24 Boolean Attributes of HTML

“Machine production […] knows no failures, but it knows no excellence, either.”—Erich Fromm

Источник

Boolean attributes in HTML and ARIA: what’s the difference?

Some attributes in ARIA are boolean(-like). These attributes may seem a lot like boolean attributes in HTML, but there are some important differences to be aware of.

George Boole, the philosopher and mathematician who came up with a type of algebra that has just true and false as its variables

Boolean attributes in HTML

In HTML, some attributes are boolean attributes, which basically means they can be true or false . They are the case, or they are not the case. They compute to one, or they compute to zero. Examples of these attributes include checked , required , disabled and open .

Boolean attributes in HTML are true when they are present:

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

So, if a checkbox is checked, it has the checked attribute, otherwise it does not. The attribute, when present, can have any value, like checked=»checked» , though the HTML spec explicitly says we should not use true or false as attribute values for boolean attributes:

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

It would work though: the checked attribute works with any value, even checked=»true» or checked=»false» represents that the input is checked:

In some cases, browsers will help us manage the presence of these attributes. They don’t for checked , but they do for details / summary (the open attribute on the details element when its summary is expanded or collapsed). In other cases, the browser can’t manage presence or absence, like for the required attribute. Whether an element is set to required, is up to the author’s intention, the browser defaults to “not required”.

The attributes I discussed earlier are what specifications call ‘content attributes’, we write them in our markup. In JavaScript, we can also affect the truth value of these HTML attributes with so-called IDL attributes, for instance:

element.checked = true; // sets checked state to true element.checked = 'checked'; // sets checked state to true element.checked = 'foo'; // also sets checked state to true element.checked = false; // sets checked state to false element.checked = ''; // sets checked state to false

Boolean attributes in ARIA

In ARIA, there are also attributes that can be true or false , but their state is expressed differently. It is a different language than HTML, after all. HTML is the most common host for it, but ARIA can also be used in other languages, like XML and SVG.

As explained previously, HTML has the concept of boolean attributes. It also has the concept of keyword and enumerated attributes. These attributes can come with a fixed number of string values. When ARIA is used in HTML, we use these types of attributes. This means that when we say “boolean” in ARIA, we’re really talking about strings that happen to be use the words “true” or “false”.

According to the type mapping table in the WAI-ARIA 1.1 specification, there are three different attribute types in ARIA that explictly list ”true” and “false” as possible values:

attributes that are “boolean”, which accept only «true» or «false» (eg aria-busy , aria-multiline , aria-readonly )
attributes that accept «true» , «false» and «undefined» (eg aria-hidden , aria-expanded , aria-grabbed , aria-selected )
“tristate” attributes, which accept ”true” , «false» or «mixed» (eg aria-checked , aria-pressed )

That’s not all, as there are also properties with different and larger sets of possible values:

aria-invalid (takes «grammar» , «spelling» , «false» and «true» )
aria-haspopup (takes «true» , «false» , «listbox» , «menu» , «tree» , «grid» and «dialog» )
aria-current (takes «true» , «false» , «page» , «step» , «location» , «date» and «time» )

All of these fall into that “keyword and enumerated attributes” bracket, they take a nullable DOMString.

ARIA attributes can be set using setAttribute() . From ARIA 1.2, which is currently a “Candidate Recommendation Draft” (it’s like a Candidate Recommendation, but with significant updates made to it), ARIA attributes can be specified using IDL attributes, too, for instance:

element.ariaChecked = "true"; // sets `aria-checked` to true

Scott O’Hara wrote about this upcoming feature in his post New in ARIA 1.2: ARIA IDL attributes.

HTML vs ARIA booleans

So, for HTML boolean attributes it’s all about presence and absence, while in ARIA boolean attributes, the boolean state is expressed via «true» and «false» string values and there are bunch of attributes that take those strings and a couple more.

Some examples of these differences:

The absence of the checked boolean attribute maps to aria-checked=»false» (unless it was modified, that is… so this mapping only applies in the elements default state)
The presence of the disabled attribute maps to aria-disabled=»true»
The presence of the open attribute on details maps the state of its summary to aria-expanded=»true» , the absence of it maps it to aria-expanded=»false»

Summary

So, there are boolean attributes and keyword and enumerated attributes in HTML. When ARIA booleans are used in HTML, they are of the latter type. They take one of two keywords: «true» or «false» . There are also ARIA attributes that take «true» and «false» , but also other keywords in addition. Those may look like booleans at first sight, but are not. That’s all, thanks for reading!

Thanks Eric Bailey, Scott O’Hara, Eric Eggert, David Luhr and Erik Kroes for their valuable feedback on earlier versions of this post.

Hidde de Vries (@hdv@front-end.social) is a web enthusiast and accessibility specialist from Rotterdam (The Netherlands). He currently works with the NL Design System team and is a participant in the Open UI Community Group. Previously, he worked for W3C (WAI), Mozilla, the Dutch government and others as a freelancer. Hidde spoke at 56 events, most recently in Amsterdam, Netherlands.

Comments, likes & shares (6)

Oh, I missed that! Much better than mine 😅 I’ll update mine with a cheeky link to Hidde’s post. Thanks for the heads-up 👍

Boolean attributes in HTML and ARIA: what’s the difference? hidde.blog/boolean-attrib… #html #aria #webdev #a11y #tips

Источник

True or false html code

Boolean attribute (HTML)

See also

Found a content problem with this page?