Comments and where whitespace matters in HTML

A comment is invisible to the reader and very visible in view-source.

<!-- Navigation: keep the order in sync with the footer -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
</nav>

<p>These    spaces
   collapse    into one.</p>

<pre>These    spaces
   do not.</pre>

How it works

1. A comment runs from <!-- to --> and cannot be nested.
2. Whitespace collapses everywhere except inside <pre> and <textarea>.
3. Inline elements sit in the text flow, so a stray newline is a space.

The run, in numbers

Lines

11

Characters to type

202

Tokens

48

Three-star pace

60 tpm

At the three-star pace of 60 tokens a minute, this run takes about 48 seconds.

Type this snippet

Step 2 of 3 in The document, step 2 of 28 in Document structure.

← Previous Next →