Skip to main content

Optional closing tags in HTML

Posted in Development

One of the interesting things about HTML5 is its (very deliberate) flexibility. One thing I’ve always found weird is that some HTML elements don’t need a closing tag.

For example, you can write a list without closing the <li>:

<ul>
<li>Red
<li>Green
<li>Blue
</ul>

It might be because I was writing HTML before the HTML5 spec was supported in browsers (XHMTL was quite strict about closing tags!), but, even though it’s valid, it looks a bit off to me.

Aside from it looking weird, there are a few good reasons I steer those I teach about HTML away from this type of code.

It’s not for every element

There’s a relatively short list of elements you can do this with. So you could come a cropper by omitting the closing tag from a <ul>, mistakenly thinking that you’re allowed to do it with lists, when it’s only the list item (<li>) that’s allowed to be left open.

Here are the elements you’re allowed to leave unclosed:

  • <html>
  • <head>
  • <body>
  • <p>
  • <li>
  • <dt>
  • <dd>
  • <option>
  • <thead>
  • <th>
  • <tbody>
  • <tr>
  • <td>
  • <tfoot>
  • <colgroup>

Getting it wrong breaks things

If you omit that </ul> things will break. Browsers do their best to fill gaps and it might end up being that your page doesn’t look all that broken, but when things break in subtle ways that invalid code might end up getting published.

It could go unnoticed by visitors who use the shiny new version of Chrome on the latest version of macOS, but, as every frontend developer knows, people use all sorts of technologies to read our websites; those old browsers, out of date operating systems, screen readers and voice controllers, might not be as forgiving…

Makes debugging more difficult

Sometimes, broken HTML is difficult to spot; especially if you’re checking your code manually. Finding a missing closing tag that’s causing validation issues is much more difficult if there are (perfectly valid) missing closing tags all over the place.

Finding your place is tricky

Even if there are no validation errors, not having a closing </li>, for example, can make finding your place on the page difficult. <li>s can contain all sorts of other elements (<p>, <blockquote>, <ul>, you name it!). With all those child and grandchild elements, it can be tricky to find your place without an explicit closing tag.

Time spent second-guessing

Just as the nesting in CSS or JavaScript would look off without a closing bracket (don’t try it – you’ll definitely break things!), nested HTML that’s missing some closing tags and not others lacks some visual order. I start to second-guess my code, which means I’m spending extra time writing it.

So let’s close our HTML elements

Leaving off some closing tags is fine from a technical point of view; it might even mean your file is a few bytes smaller! But it can cause problems, and, for me, the fewer problems I encounter as I work, the better!

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that's not enough, have a look at the full list.

  1. Opening links in a new tab or window is better avoided

    A link to an external source opening in a new tab or window is something that appears innocuous but really isn’t as straightforward it seems.

  2. First impressions of iOS 14

    After 24 hours using iOS 14, I’ve found some of the new features unexpectedly useful. Here are my first impressions.