Comments and how browsers treat spaces

Notes that only humans read

A comment is text in your HTML that the browser ignores. It starts with <!-- and ends with -->:

<!-- Main heading: keep it under 60 characters -->
<h1>Our services</h1>

<!--
  The pricing table below is updated every April.
  Check with the sales team before changing it.
-->
<p>Pricing coming soon.</p>

Press Try it: the comments do not appear in the result.

Comments are useful for:

• explaining why something is done a certain way, when the code alone cannot say it;
• marking the start and end of large sections in a long file;
• temporarily hiding a piece of HTML while testing, without deleting it.

Comments are public

A comment is not displayed, but it is not secret. The whole file, comments included, is sent to every visitor's browser. Anyone can read it with View page source. Never put passwords, API keys, private phone numbers or rude remarks about a client in an HTML comment. People do find them.

Also be careful not to nest comments. The first --> ends the comment, so anything after it reappears on the page.

Where did my spaces go?

Try typing a paragraph with several spaces between words and a few line breaks in the middle:

<p>This     sentence    has
lots of      extra spaces

and line breaks       in the code.</p>

The browser shows it as one tidy line of text with single spaces. This is called whitespace collapsing: inside normal text, any sequence of spaces, tabs and line breaks becomes a single space.

It is a feature, not a bug. It means you can indent and wrap your HTML however you like for readability, without affecting what visitors see.

The right tool for each kind of spacing

When you do want control over spacing, pick the method that matches the meaning:

<p>Cobox Learning<br>12 Station Road<br>Pune 411001</p>

<pre>
Name     Score
Asha       92
Ravi       87
</pre>

The <pre> element keeps the spaces exactly as written and usually shows text in a monospaced font, where every character has the same width, so columns line up.

What about  ?

  is a non-breaking space: a space that does not collapse and does not allow a line break at that point. It is genuinely useful between things that must stay on one line, such as 10 km or Rs. 500. Using rows of   to push things across the page is a habit to avoid: it breaks on different screen sizes. Spacing is CSS's job.

Invisible characters copied from documents or chat apps, including stray non-breaking spaces, can cause odd gaps. The Invisible Character Cleaner shows and removes them.

Common mistakes

• Secrets in comments. Treat every comment as public.
• Stacking <br> tags or   for layout. It looks right on your screen and wrong on a phone.
• Forgetting the closing -->, which hides the rest of the page. If half your page vanished, look for an unclosed comment.

Exercise

Write an address for a shop using one paragraph and line breaks, then a small two-column table of opening hours inside a pre element. Add a comment above each part explaining what it is.

<!-- Shop address: one paragraph, a line break per line -->
<p>Green Leaf Books<br>45 MG Road<br>Bengaluru 560001</p>

<!-- Opening hours: pre keeps the columns lined up -->
<pre>
Mon-Fri   10:00-20:00
Sat       10:00-18:00
Sun       Closed
</pre>