Open House: Archives

At the time of its standardization, XHTML marked a major leap forward in standards for the web. Gone were the days of sloppy markup and broken pages due to unclosed tags. Strict syntax was the way of the future! Strict syntax promised to lead us to bigger and better success.

Well HTML5 is here and all that is out the window. HTML5 promises us more power than we've ever had before, but as far as markup syntax is concerned, it's sort of like moving from Dick's Drive In to Red Robin—both will get you your burger fix, but one has over a dozen overwhelming options vs the other's concise selection of four.

For example, in XHTML this is how you write a break tag:

<br />

That's it. There are no other options. There's something very comforting about knowing there's one correct way to do things. This section and this section of the XHTML specification explain the br tag syntax.

In HTML5 there are six acceptable ways of writing a break tag:

<br>
<br/>
<br />
<BR>
<BR/>
<BR />

Use whichever one you like, there is no functional difference. This section in the HTML5 draft specifies this.

I, like many others, was shocked—even borderline offended— at the W3's decision to include HTML syntax along with XHTML syntax in the HTML5 spec. There are many people who say they'll only be using XHTML syntax due to its higher level of strictness, and I was among them. At least, I was until I started writing lists.

I've had to work with a lot of lists this week, and as I found myself waist deep in the fourth nested level of my fifth unordered list, I started thinking, "Why is this not easier? Why does my list look more like a stack of Tinker Toys than a list?" That's when it hit me. HTML5 offers a better way to markup lists.

Consider the following list:

• Baby Lima Beans
• Green Beans
  • French Cut
  • Regular Cut
  • Whole
• Italian Beans
• Wax Beans

In XHTML, the markup is as follows:

<ul>
  <li>Baby Lima Beans</li>
  <li>Green Beans
    <ul>
      <li>French Cut</li>
      <li>Regular Cut</li>
      <li>Whole</li>
    </ul>
  </li>
  <li>Italian Beans</li>
  <li>Wax Beans</li>
</ul>

Pretty standard. I've been writing list markup like this for years. Everything is nicely nested and hierarchical. In HTML5 this is valid markup, but there's also another option:

<ul>
  <li>Baby Lima Beans
  <li>Green Beans
    <ul>
      <li>French Cut
      <li>Regular Cut
      <li>Whole
    </ul>
  <li>Italian Beans
  <li>Wax Beans
</ul>

"Booo! Sloppy markup! No closing tags! It's a wonder this list renders correctly at all!"

Now hold on a second! Take a step back and really look at that list. See how nice it looks compared to the XHTML list? See how much less cluttered it is? See how it actually looks like a list?

The writer in me loves this list. Each item has a single bullet to the left and I barely have to worry about keeping track of hierarchies. In fact, the programmer in me kind of likes this list too. It's simplistic, concise, and effective. It's pretty safe too; you can throw almost anything you want after a list tag and there's very little chance of breaking the markup.

There is potential gain for clients as well. If a client will be doing some light HTML editing, the simpler the markup, the better. I want the client to be able to dive right in and see something that makes sense, not have to wade through a tangled spiderweb of nested list tags.

Granted, the option to not use closing tags has been around since HTML 4, and there's a lot of valid arguments that it is sloppy markup. I'm not sure there's really much readability gain from omitting closing paragraph tags but lists are definitely a lot more legible. Even better, I don't have to compromise the rest of my markup to make such an exception, I can continue to markup the rest of my site as strictly as I please.

HTML5 is kind of like reinstating an old pair of boxer shorts. You're certainly not going to put them on when running a marathon, but they're a lot more comfortable than those tighty-whiteys for everyday wear. HTML5 offers us two options: the option to live free and without restrictions, and the option to really get some work done when we need to. Am I going to be marking up the layout for my next site without closing tags? Probably not. But I just might go without them when writing my next article in HTML5.