Some HTML is “Optional”

There is a variety of HTML that you can just leave out of the source HTML and it’s still valid markup.

Doesn’t this look weird?

<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.

It does to me, but the closing

tags are optional. The browser will detect it needs them and manifest correctly in the DOM anyway.

This probably happens to HTML you write and you don’t even know it. For example…

<table>
  <tr>
    <td></td>
  </tr>
</table>

That looks perfectly fine to me, but the browser will inject a

Heck, you don’t really even need a in the same fashion! Jens Oliver Meiert shares more:

<link rel=stylesheet href=default.css>

Some attributes are “optional” too in the sense that they have defaults you can leave out. For example, a is automatically .

Oliver further argues that these are almost considered optimizations, as it reduces file size and thus network speed.

Me, I don’t like looking at HTML like that. Makes me nervous, since there are actual situations that screw up if you don’t do it right. Not all file names can be left unquoted. Sometimes, leaving off closing tags means enveloping a sibling element in a way you didn’t expect. I’d even sacrifice a tiny smidge of performance for a more resilient site. Sorta like how I know that * {} isn’t a particularly efficient selector, but worrying about CSS selector performance is misplaced worry in most cases (the speed difference is negligible).

I actually quite like JSX in how strict it forces you to write “HTML.” That strictness helps code formatting (e.g. Prettier) too, as a bonus.

But hey, a perf gain is a perf gain, so I wouldn’t say no to tooling that automatically does this stuff to compiled output. That’s apparently something HTMLminifier can do.

The post Some HTML is “Optional” appeared first on CSS-Tricks.