Illustration of oversized text blocks: a heading bar, paragraph lines, bullet points and quotation marks

Module 2: Text · Lesson 7 of 8

HTML Comments and Character Entities Explained

About 7 min

All lessons in Module 2
  1. Headings
  2. Paragraphs and Line Breaks
  3. Strong and Emphasis
  4. Lists
  5. Nested Lists
  6. Quotes and Code
  7. Comments and Entities
  8. Project: Recipe Card

Module overview

Goal: Leave hidden notes in your code and show special characters.

Learn

Two tricks for text the browser would otherwise misread.

A comment is a note for humans, like the comments in programming languages (opens in a new tab). The browser skips anything between <!-- and -->, so it's a good spot for reminders like <!-- TODO: add photo -->. Comments stay in the source code, where anyone can read them. Never put secrets there.

An entity shows a character that HTML uses for itself. Type <p> in your text and the browser thinks it is a real tag. So write a code that starts with & and ends with ;:

WriteShows
&lt;<
&gt;>
&amp;&
&copy;©

The short version

  • A comment starts with <!-- and ends with -->. The browser skips it, but anyone can read it in the source code.
  • An entity starts with & and ends with ;, like &lt; for < or &copy; for ©.
  • To show HTML tags as text, write &lt; and &gt; instead of the angle brackets.
  • Because & starts every entity, write a literal ampersand as &amp;.

Example

<!-- This note is invisible on the page -->
<p>Use &lt;h1&gt; for the main heading.</p>
<p>Salt &amp; pepper</p>
<p>&copy; 2026 Cookie Club</p>

Your task

Finish this cheat sheet:

  1. In the first paragraph, replace OPEN and CLOSE so the page shows <p> and </p> as text. Use entities, or the browser will treat them as real tags.
  2. Add a paragraph at the bottom with the copyright symbol, the year and your name, like © 2026 Sam.
  3. Add a comment anywhere with a note to yourself.

Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.

Quick quiz

Common mistakes

Wrong

<p>Menu</p>
// TODO: add prices

Right

<p>Menu</p>
<!-- TODO: add prices -->

// and /* */ are comments in JavaScript and CSS. In HTML they are ordinary text and show on the page.

Wrong

<!-- old menu
<!-- TODO: fix link -->
<p>Home</p>
-->

Right

<!-- old menu (TODO: fix link)
<p>Home</p>
-->

Comments cannot be nested: the first --> ends the comment, so the paragraph appears and the last --> shows as text.

Go deeper

HTML defines more than 2,000 named entities (opens in a new tab), but on a modern UTF-8 page you only truly need a few: &lt; and &amp; in text, and &quot; inside double-quoted attribute values. Everything else, from é to €, can be typed directly, although entities are handy when a symbol is hard to type.

One entity earns its keep: &nbsp;, the non-breaking space. It looks like a normal space but stops the browser from wrapping a line there, so 10&nbsp;kg or Mr.&nbsp;Smith never splits across two lines. Don't use rows of them to create gaps. Spacing belongs in CSS. The most useful entities are collected on the HTML cheat sheet.

Comments have a cost: every visitor downloads them. Build tools that minify HTML for production usually strip them out. Usually is not always, so comments must never hold anything private (see the HTML best practices guide). Developers use them for section markers in long files, for explaining a tricky choice, and for temporarily disabling code while testing.

In most code editors, Ctrl+/ (Cmd+/ on a Mac) toggles a comment on the selected lines.

Frequently asked questions

How do I write a comment in HTML?

Wrap the note in <!-- and -->, for example <!-- TODO: add photo -->. A comment can span several lines. It can also hide a block of code for a while; that's called commenting it out. Comments are invisible on the page but show up in View Page Source, so never put passwords or private notes in one.

How do I show a less-than sign or HTML tags as text?

Use entities: &lt; shows < and &gt; shows >. So &lt;p&gt; displays <p> as text instead of starting a paragraph. The same goes for the ampersand: write &amp;. Inside attribute values in double quotes, write a double quote as &quot;. To escape a whole snippet at once, a tool such as Text-HTML (opens in a new tab) converts the special characters for you.

What is the difference between named and numeric entities?

A named entity uses a memorable name, like &copy;. A numeric one uses the character's Unicode number, which you can look up in the Unicode code charts (opens in a new tab), in decimal (&#169;) or hexadecimal (&#xA9;). All three show ©. Numeric entities work for any character, even ones without a name. On a UTF-8 page you can also type most symbols directly.

Tags in this lesson

Read next