WTF Boolean Attribute: How to use the required attribute in HTML

Reading specs is hard. There I said it, but it’s not like it hasn’t been said before by the bajillion other developers out there and today is no different for me. I’ve been doing some writing lately that requires me to conduct research within the actual documentation which brings our work to life. It’s also the content we search heavily for on blogs that help interpret it for us to digest.

It can be tricky to find that one little word that sets the whole meaning on fire and dings that magical bell in your head. “Oh I see now what they mean now,” a phrase muttered by all developers. And now the point of all this is the very quote below which I will explain my confusion and interpretation very soon;

Boolean Attributes: 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.

W3C HTML5 Semantics

Ok, now that you’ve soaked in that juicy double entendre it’s time for me to explain how I see things. Lets start with the first part here:

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

I take this as the following…

/* "The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value." */
<input type="name" required>

However if we look closer this is where we’ll see things get a little strange:

If the attribute is present, it’s 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.

WAT? WAT did you say? so now you’re telling me to do the exact opposite of what you just asked of me. Now I see this as…

/* "If the attribute is present, it's value must either be the empty string..." */
<input type="name" required="">

/* "...or a value that is a case-insensitive match for the attribute's canonical name" */
<input type="name" required="required">

The point is that it works with any of the 3 ways I’ve noted previously, but for fucks sake just say what you mean and mean what you say so I can get along and do my job.

In case you wanna tinker with a demo then feel free to fork this one and test in other browsers to see what I mean.

Check out this Pen!

GrayGhost

Web Development & Design, Technical Writing, Interaction Design, Open Source Maker & Contributor. Helping Create A Better Web. http://grayghostvisuals.com.
  1. Yeah, so this is completely monkey-balls. And the spec is supposed to be clear!

    I’ve only ever put the name of the attribute, with no =”” at all. Welp. I don’t even know anymore.

    1. I know right? I feel like I’m in a mine field just waiting for the explosion to happen under my feet. “Is it this one or that one?” tick tock, tick tock.

  2. ❧ Terry shouted:
    2016/09/29 • 10:52 am

    Not sure if it’s still an issue, but I go with consistency, and I like my code that way…so I always go with:

    meaning, just about ALL tag attributes require the attr=”attr” format. I leave “shorthand” coding for CSS and JS, not my well written front end code.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2013/04/02