HTML Comments, Whitespace and Special Characters

HTML comments let you leave notes in your code, and character entities let you show special symbols. Learn how to write comments, how browsers handle whitespace, and how to use entities like ©.

How to write comments in HTML

A comment is a note in your code that the browser does not show. It is like a sticky note on your work, for you or other developers.

A comment starts with <!-- and ends with -->. Everything between them is ignored by the browser.

<!-- Main heading for the home page -->
<h1>Corner Café</h1>

<!-- Opening hours: update these every season -->
<p>Open every day from 8 am to 6 pm.</p>

<!--
<p>We are closed for holidays this week.</p>
-->

In the browser you only see the heading and the opening hours. The holiday message is "commented out", so it is hidden. This is a handy way to switch content off for a while without deleting it.

Note: Comments are hidden on the page, but anyone can read them with View Source. Never put passwords or private information in a comment.

Tip: In VS Code, select some lines and press Ctrl + / (or Cmd + / on a Mac) to comment them out or back in.

How does HTML handle whitespace?

Whitespace means spaces, tabs and new lines. Browsers have a special rule called whitespace collapsing: many spaces or new lines in a row become just one space.

<p>Hello          world!</p>
<p>This sentence
is written over
three lines in the code.</p>

In the browser, the first paragraph shows "Hello world!" with one normal space. The second paragraph shows as one line of text, "This sentence is written over three lines in the code." The new lines in your code are ignored.

This is actually helpful. It means you can indent your code and split long lines to make them readable, without changing the page.

So how do you make real line breaks and space?

• For a new paragraph, use a new <p>.
• For a line break inside content, such as an address, use <br>.
• For space and layout, use CSS later.

What are HTML character entities?

Some characters have a special job in HTML. The most important is <, because it starts a tag. If you type <p> as text, the browser thinks it is a real tag.

To show these characters as normal text, you use a character entity. An entity starts with & and ends with ;. Here are the ones you will use most:

Entity	Shows	Use it for
&lt;	<	"less than", or showing a tag as text
&gt;	>	"greater than"
&amp;	&	an ampersand
&quot;	"	a double quote inside an attribute value
&copy;	©	copyright
&nbsp;	(a space)	a non-breaking space

Here is a footer and a tutorial sentence using entities:

<p>To start a paragraph, type &lt;p&gt; in your code.</p>
<p>Tom &amp; Jerry's Ice Cream</p>
<p>&copy; 2026 Corner Café. All rights reserved.</p>
<p>The shop is 100&nbsp;km from London.</p>

You will see "To start a paragraph, type <p> in your code." as plain text (the tag is shown, not used), then "Tom & Jerry's Ice Cream", then "© 2026 Corner Café", and finally "100 km" where the number and "km" always stay together on the same line.

What does a non-breaking space do?

A non-breaking space ( ) looks like a normal space, but the browser will never break the line there. Use it to keep things like "100 km" or "Mr. Smith" together. It is not for adding extra space between words.

Common mistake: Typing lots of   to push text to the right. It is fragile and looks broken on phones. Use CSS for spacing instead.

Do I need entities for symbols like é or €?

Usually not. Because your page uses <meta charset="utf-8">, you can type é, ñ, €, © and even emoji directly. You only really need entities for <, > and & when you want to show them as text, and for  .

Practice exercise

Create a footer paragraph for a website that shows a copyright symbol, the current year and a company name with an ampersand, such as "Smith & Sons". Then add a comment above it explaining what the paragraph is for.

Hint: you need © and &, and your comment starts with <!--.

Key takeaways

• Comments use <!-- and -->; they are hidden on the page but visible in View Source.
• Browsers collapse many spaces and new lines into one space.
• Use <p> and <br> for real breaks, and CSS for spacing.
• Character entities like <, & and © show special characters as text.
•   keeps two words together on one line.