Minifying CSS is easy. Minifying JavaScript is a solved problem. Minifying HTML looks easy too, until the day your minifier eats a space that mattered and two words glue themselves together on the live page.

Here is the trap. In HTML, whitespace is not decoration. It is content.

The space between two words is load-bearing

Take this markup:

<p> Click <a href = "/pricing" > here </a> to see the price. </p>

Enter fullscreen mode

Exit fullscreen mode

There is a space after "Click" and a space before "to". A careless minifier sees whitespace between tags and deletes it, because most whitespace in HTML is meaningless. But these two spaces are the only thing keeping "Click", "here" and "to see the price" as separate words. Strip them and your page reads "Clickhere to see the price." or worse, "Clickhereto see the price."

The same rule applies everywhere inline elements touch text: <strong> , <em> , <span> , <a> , <code> . A minifier that treats HTML like a flat string will break your sentences.…