title

Browsers are extremely forgiving when it comes to invalid HTML. As a result, most web developers don't bother with validating the HTML that they write. Don't lie to me. I know you don't. I have run your website's source through a validator 👀.

The traditional way of validating HTML is to pass the URL of your website or copy-paste its source directly into the W3C HTML validator (Opens in a new window). This is not convenient. It's manual, slow, and nobody will remember to do it for every pull request.

That's why I wrote an Elixir library that provides ExUnit assertions for HTML validation (Opens in a new window). If the HTML produced by my Phoenix Controller action is invalid, the unit test will fail. It's automatic, fast, and I only need to remember to write the right test assertion once 🚀.

In this post, I want to share with you the types of HTML bugs that I managed to catch with HTML validation, to convince you to give HTML validation a try. Note that I am not claiming that those kinds of bugs are always caused by invalid HTML, only that that was the case for me.

1. Styling ends unexpectedly

Demo on CodePen (Opens in a new window).

Given the markup below, you might expect all three phrases, "Text before a list", "List item", and "Text after a list" to be styled with red text.

<style>
  p { color: #dd0000; }
</style>

<p>
  Text before a list. 

  <ul>
    <li>List item.</li>
  </ul>

  Text after a list.
</p>

In reality, only the first phrase is red.