Comments & Whitespace

Difficulty: Beginner

HTML comments allow you to add notes to your code that are invisible to users but visible in the source code. Comments are written between  markers. They can span single or multiple lines. Browsers completely ignore commented-out content - it is not rendered, not read by screen readers, and does not affect page layout. However, comments are still sent to the browser and can be viewed in the page source, so never put sensitive information like passwords or API keys in HTML comments.

Comments serve several important purposes in web development. They help explain complex code sections to other developers (or your future self), temporarily disable HTML code during debugging without deleting it, mark sections of a page for easier navigation in large files (like  or ), and document TODOs or known issues. Good commenting practices make code more maintainable, especially in team environments.

Whitespace handling in HTML is an important concept that often confuses beginners. HTML collapses multiple consecutive whitespace characters (spaces, tabs, newlines) into a single space when rendering text content. This means that whether you put 1 space or 100 spaces between two words, the browser will display only 1 space. Similarly, line breaks in your HTML source code do not produce visible line breaks on the page - you must use <br> for that. This whitespace collapsing behavior is intentional and allows developers to format their source code with indentation for readability without affecting the visual output.

There are exceptions to whitespace collapsing. The <pre> (preformatted text) element preserves all whitespace and line breaks exactly as written in the source. The CSS white-space property can also control whitespace behavior - white-space: pre preserves all whitespace, while white-space: nowrap prevents line wrapping. The   entity (non-breaking space) is another way to force a visible space that will not be collapsed.

Proper indentation is crucial for readable HTML, even though it does not affect rendering. The standard convention is to indent child elements by 2 or 4 spaces (or 1 tab) relative to their parent. This visual hierarchy makes it easy to see which elements are nested inside which. Most code editors can auto-format HTML to maintain consistent indentation. Tools like Prettier can enforce a consistent style across a team.

Code examples

HTML Comments

<!-- This is a single-line comment -->

<!--
  This is a multi-line comment.
  It can span as many lines as needed.
  Useful for documenting sections of code.
-->

<!-- Navigation Section -->
<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <!-- <a href="/contact">Contact</a> (temporarily disabled) -->
</nav>

<!-- TODO: Add footer with social links -->
<footer>
  <p>Copyright 2026</p>
</footer>

Comments are invisible in the rendered page. They are used for documentation, temporarily disabling code, marking sections, and noting TODOs. The Contact link is commented out and won't be rendered.

Whitespace Collapsing

<!-- All of these render the same way: -->
<p>Hello World</p>

<p>Hello      World</p>

<p>Hello
   World</p>

<p>
  Hello
  World
</p>

<!-- All four paragraphs display as: "Hello World" (single space) -->

<!-- To force specific spacing: -->
<p>Hello&nbsp;&nbsp;&nbsp;World</p>  <!-- Three non-breaking spaces -->

<!-- To preserve line breaks: -->
<p>Line one<br>Line two<br>Line three</p>

HTML collapses all consecutive whitespace into a single space. Use   for extra spaces and <br> for line breaks within text.

Preserving Whitespace with <pre>

<!-- Normal paragraph: whitespace is collapsed -->
<p>function hello() {
    console.log("Hi");
}</p>

<!-- Pre element: whitespace is preserved exactly -->
<pre>
function hello() {
    console.log("Hi");
}
</pre>

<!-- Pre with code for displaying source code -->
<pre><code>
&lt;div class="container"&gt;
  &lt;h1&gt;Title&lt;/h1&gt;
  &lt;p&gt;Content&lt;/p&gt;
&lt;/div&gt;
</code></pre>

The <pre> element preserves all whitespace and line breaks. It is commonly used with <code> to display source code. Note that HTML entities like < and > are used to display angle brackets literally.

Key points

HTML comments are visible in the page source code. Never put passwords, API keys, or sensitive data in comments.
Whitespace collapsing applies to text content inside elements. Multiple spaces, tabs, and newlines are all collapsed into a single space.
Use consistent indentation (2 spaces, 4 spaces, or tabs) for readability. The indentation does not affect how the page looks.
The   entity creates a non-breaking space that prevents the browser from wrapping a line at that point and is not collapsed.

Concepts covered

HTML Comments, Whitespace Collapsing, Indentation, Code Readability, Conditional Comments