Comments & Whitespace

Two small topics that make an enormous difference to the readability and maintainability of your HTML — and how browsers handle invisible characters.

What Is an HTML Comment?

A comment is a note you write inside your HTML file that the browser completely ignores when rendering the page. The visitor never sees it. Only people reading the source code can see it.

Comments are written like this:

<!-- This is a comment. The browser ignores everything between these markers. -->

• <!-- — opens the comment (note: two hyphens, no space after <!)
• This is a comment. — the note itself, anything you like
• --> — closes the comment (two hyphens then greater-than)

Why Use Comments?

Comments serve several important purposes:

1. Explain Your Code

HTML can become complex, especially with deep nesting. A comment explains why something is done, not just what:

<!-- Navigation menu - links must match the folder structure exactly -->
<nav>
  <a href="index.html">Home</a>
  <a href="about/index.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

2. Mark the End of Long Sections

When a closing tag is far away from its opening tag, it's easy to lose track of which element you're closing. A comment at the closing tag helps:

<div class="main-wrapper">

  <!-- ... hundreds of lines of content ... -->

</div> <!-- end .main-wrapper -->

3. Temporarily Disable Code

Instead of deleting something you might want back later, you can "comment it out." It disappears from the page but stays in your file:

<!--
<p>This paragraph is temporarily hidden while I work on the design.</p>
-->

This is called commenting out code. It's a debugging technique you'll use constantly.

4. Leave Notes for Yourself and Others

<!-- TODO: Add the contact form once the backend is ready -->
<!-- FIXME: This section breaks on mobile screens wider than 320px -->
<!-- Last updated: March 2025 -->

Multi-Line Comments

Comments can span multiple lines:

<!--
  Author: Jane Smith
  Last updated: June 2025
  Description: Homepage layout for Acme Corp website
  Note: the sidebar is hidden on mobile via CSS only
-->

Keyboard Shortcut for Comments

In VS Code, you can toggle a comment on the current line (or selected lines) with:

• Windows / Linux: Ctrl + /
• Mac: Cmd + /

VS Code detects the file type and uses the correct comment syntax automatically. In an HTML file it wraps the selection in <!-- -->. In a CSS file it uses /* */. In JavaScript it uses //. This shortcut works in virtually every code editor.

What Is Whitespace in HTML?

Whitespace refers to any invisible characters in your source code: spaces, tabs, and line breaks (newlines). In normal text, several spaces in a row create — several spaces. In HTML, it works very differently.

The Whitespace Collapse Rule

HTML collapses multiple whitespace characters (spaces, tabs, new lines) into a single space. This is called whitespace collapsing.

<p>This    has     many      spaces      in    the    source.</p>
<!-- Renders as: "This has many spaces in the source." -->

<p>
  This paragraph
  is spread across
  multiple lines.
</p>
<!-- Renders as: "This paragraph is spread across multiple lines." -->

Notice the second example: all three lines of text render on one line with single spaces between the words. The line breaks in the source became spaces in the output.

Why Is This Useful?

Because of whitespace collapsing, you can freely indent your HTML for readability:

<!-- Both render identically -->

<ul><li>Item one</li><li>Item two</li></ul>

<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

The second version is far easier to read and debug. Use indentation freely — it costs nothing on screen.

When Whitespace Does Matter

There are situations where whitespace between inline elements can create a small but visible gap. This is a known quirk:

<!-- These images will have a tiny gap between them due to the whitespace -->
<img src="a.png" alt="A">
<img src="b.png" alt="B">

<!-- No gap: they're on the same line with no whitespace between them -->
<img src="a.png" alt="A"><img src="b.png" alt="B">

In practice, this is solved with CSS (using display: flex on the parent container) rather than squishing tags together, which is unreadable. But it's worth knowing the gap exists and why.

Forcing a Line Break: <br>

If you want to force text onto a new line without starting a new paragraph, use the <br> element (line break). It's a void element — no closing tag:

<p>
  221B Baker Street<br>
  Marylebone<br>
  London<br>
  NW1 6XE
</p>

This renders each line of the address on its own line. Use <br> sparingly — if you need many line breaks to create spacing, CSS margin and padding are almost always the right tool instead.

Non-Breaking Spaces: &nbsp;

Normally, a browser can break a line between any two words. The non-breaking space entity   creates a space that the browser will never break a line across:

<p>The year was&nbsp;2024.</p>
<p>€&nbsp;49.99</p>
<p>Mr.&nbsp;Smith</p>

Use this when breaking between two words would look awkward — like a currency symbol and a number, or a title and a name.

The <pre> Element: Preserve Whitespace

The <pre> (preformatted text) element is the exception to the whitespace collapsing rule. Inside <pre>, spaces, tabs, and line breaks are preserved and displayed exactly as written:

<pre>
  Name:    Jane Smith
  Role:    Developer
  Team:    Frontend
</pre>

The browser renders this with the alignment exactly as typed. <pre> is typically used for code samples, ASCII art, and any content where exact spacing matters. It also switches to a monospace font by default.

Best Practices for Comments and Whitespace

• Comment to explain why, not what. The HTML itself already shows what — your comment should add context.
• Use consistent indentation throughout your file. Pick 2 or 4 spaces and stick to it.
• Add a blank line between major sections of HTML for visual breathing room.
• Comment the closing tags of complex wrapper elements (</div> <!-- end .sidebar -->).
• Remove commented-out code before shipping to production, or at least review it — stale commented code becomes confusing.
• Never put sensitive information in comments.

Interview Questions

Summary

• HTML comments are written as <!-- text --> and are ignored by the browser but visible in source code.
• Never put sensitive information in comments — they are public.
• HTML collapses multiple spaces, tabs, and line breaks into a single space — this is whitespace collapsing.
• <br> forces a line break;   creates a non-breaking space.
• <pre> preserves whitespace exactly as written and uses a monospace font.
• Use CSS, not  , to create spacing between elements.

Related Topics

• HTML Syntax & Structure
• Your First HTML File