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 (S'ouvre dans une nouvelle fenêtre). 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 (S'ouvre dans une nouvelle fenêtre). 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 (S'ouvre dans une nouvelle fenêtre).

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.