PHASE 1Beginner ~24 min· topic 4 of 8

Topic 1.4

Comments, Whitespace and Character Entities

In one line

Comments are notes in your HTML that the page doesn't show; character entities like < and & let you show characters that HTML would otherwise treat as code, which is also the basis of safe escaping.

Think of it like this

Writing a note to a friend in a language where < means "start a secret instruction". If you want to write the actual symbol, you can't just draw it: your friend would think an instruction is coming. So you agree on a code word: you write "less-than" and your friend reads it as the symbol. Character entities are those code words. Comments are the pencil notes in the margin that your friend agrees to skip.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Comment: A note in the code, written , that the page doesn't show.
Character entity: A code like < that stands for one character the browser should show.
Escaping: Replacing special characters with entities so they show as text instead of being read as code.
Non-breaking space:  : a space that doesn't collapse and keeps the words around it on the same line.
Unicode: The worldwide list that gives every character and emoji its own number.
Numeric entity: An entity using a character's Unicode number, like © or © for ©.
XSS: Cross-site scripting: an attack where unescaped user text becomes code on a page. Escaping prevents it.

Step by step

01Leave a comment

A comment can sit anywhere text can. It's a note for you or your team, not for visitors.

index.htmlwhole filehtml

<!-- Main heading: keep it under 60 characters -->
<h1>Learn HTML</h1>

02Try to show a tag as text

You want the page to say: Use the <p> tag. Written directly, the browser reads <p> as a real paragraph tag and the sentence splits.

index.htmlwhole filehtml

<p>Use the <p> tag for paragraphs.</p>
<!-- the page shows two paragraphs: "Use the" and "tag for paragraphs." -->

03Escape it

Replace < with < and > with >. Now the browser shows the characters instead of reading a tag.

index.htmlwhole filehtml

<p>Use the &lt;p&gt; tag for paragraphs.</p>

04Escape the escape character

To show the text < itself, you must escape its &: write &lt;. The browser turns & into &, then shows lt; as plain text.

index.htmlwhole filehtml

<p>Write &amp;lt; to show a less-than sign.</p>
<!-- shows: Write &lt; to show a less-than sign. -->

05How the browser decodes

The parser reads each &...; as it builds the page and puts the real character into the DOM. JavaScript never sees < in textContent; it sees <.

How the browser decodesdiagram

Rendering diagram…

Try it yourself

1
Find a character's entity
In the first example, add a paragraph with ₹. Predict which symbol it is (hint: currency in India), then run it. Try ₹ too: same number, written in hexadecimal.
2
Break the line between 10 and km
In the first example, make the window narrow and see that 10 km never splits. Replace   with a normal space: what does the console now print for the character code?
3
Compare textContent and innerHTML
In the last example, change safe.textContent = visitorText to safe.innerHTML = visitorText. Predict what the page shows before running. (Only ever do this with text you wrote yourself, never with text from visitors.)

Code & diagrams

Entities and what they become New tab

A normal space has code 32; a non-breaking space has code 160.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Use the <p> tag for paragraphs.
Salt & pepper, 5 < 7, "quoted"
© 2026 Hectal — all rights reserved → read more…
© and © are both the copyright sign. 🙂
Code of the space before km: 160

Comments are part of the page's code New tab

The comment isn't shown, but it's in the DOM and in the page source. Anyone can read it.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Found a comment: TODO: add the sale banner here

Escaping keeps user text as text New tab

`textContent` treats the visitor's text as plain text: the browser escaped `<`, `>` and `&` for you, so the tags show literally and nothing runs.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

Shown: I <b>love</b> this & that
Stored as HTML: I &lt;b&gt;love&lt;/b&gt; this &amp; that

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Nest a comment

Write  still outer? --> to comment out a block that already contains a comment.

terminal

$ the page shows

── what you'll see ──

still outer? -->

Break #2

Forget to escape an ampersand in text

Write <p>Terms &copy=2</p> meaning the literal text &copy=2.

terminal

$ the page shows

── what you'll see ──

Terms ©=2

Myth vs fact

Myth

HTML comments are private notes.

Fact

They are sent to every visitor and readable with View Source. Keep secrets out of them.

Myth

You need entities for accented letters and emoji.

Fact

With <meta charset="utf-8"> you can type é, ₹ and 🙂 directly. Entities are only needed for <, &, quotes inside attributes, and invisible characters.

Myth

  is the way to add spacing.

Fact

It prevents a line break between two words. For gaps and alignment, use CSS margins and padding.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
Strictly, > only needs escaping in rare cases, and " only inside double-quoted attributes. But escaping all five of & < > " ' in untrusted text is the standard defensive rule, because it's correct in both text and quoted attributes.
▸
Escaping depends on context: text inside HTML, an attribute value, a URL, a <script> block and CSS each need different encoding. HTML entities don't make text safe inside <script> or in an href="javascript:..." URL. Use your framework's escaping (React escapes {text} by default; the React course's Phase 21 covers where it doesn't), avoid innerHTML with untrusted data, and add a Content Security Policy as a second line of defence.
▸
Emoji outside the Basic Multilingual Plane, like 🙂 (U+1F642), take two UTF-16 code units, so "🙂".length is 2 in JavaScript. Some emoji are several code points joined together (👩‍💻 is a woman, a zero-width joiner and a laptop). See the JavaScript course for strings.
▸
In attribute values, the parser does not decode a legacy entity without its semicolon when the next character is = or a letter or digit, so href="?a=1&copy=2" keeps &copy=2. In text it would become ©=2. Escaping every & as & avoids remembering the rule.

Remember this

1
A comment starts with . Everything in between is ignored by the page: it isn't shown. Use comments to explain why code is there, to label sections of a long page, or to switch something off for a moment. Comments cannot be nested: the first --> ends the comment, so a comment inside a comment breaks.
2
Comments are not secret. They are sent to every visitor and anyone can read them with View Source or DevTools. Never put passwords, keys, private notes or internal links in HTML comments.
3
Some characters have a special job in HTML. < starts a tag and & starts an entity. To show them as text, write a character entity: < for <, > for >, & for &, " for " (needed inside double-quoted attribute values) and ' or ' for '. Every entity starts with & and ends with ;.
4
Other entities give characters that are hard to type: © ©, ® ®, ™ ™, — —, → →, … ….   is a non-breaking space: a space that never collapses and never lets the line break there, useful between a number and its unit (10 km). Don't chain   to make layout gaps; that's CSS's job.
5
Any character can be written as a numeric entity using its Unicode number: © (decimal) or © (hexadecimal) both give ©. Unicode is the worldwide list that gives every character in every language (and every emoji) a number. With <meta charset="utf-8"> you can also type characters like é, ₹, 你 and 🙂 directly; entities are needed only for the special characters < and &, and for invisible ones like  .
6
Escaping means replacing special characters with entities so text is shown as text. It matters most for security: if a website puts a visitor's comment into its HTML without escaping, a comment containing tags would become real HTML on everyone's screen. This attack is called cross-site scripting (XSS). The defence is to always escape user text, which happens automatically when JavaScript sets textContent instead of innerHTML, and in most templating tools.

Explain it without notes

Why do you need < and &? What goes wrong without them?

Are HTML comments safe for private notes? Why or why not?

What is the difference between a named entity and a numeric entity?

How does escaping protect a site against cross-site scripting?

Practice

Write a paragraph that shows exactly this text: Use <h1> once & only once.

Write a footer paragraph with a copyright sign, the year, the name Hectal, and a non-breaking space between Page and 1.

Add a comment above a heading explaining that it must match the page title.

Trade-offs

↔
Typing characters directly (é, ₹, 🙂) is more readable; entities are safer when files might be saved in the wrong encoding, and are required for < and &.
↔
Comments help the next developer but are downloaded by every visitor; build tools often strip them in production.

Done when you can

I can write comments and know they are public and can't nest.
I can escape <, >, & and quotes with entities.
I know when I can type a character directly instead of using an entity.
I can explain how escaping prevents XSS and that textContent escapes for me.

Command Palette

Words you'll meet

Step by step

01Leave a comment

02Try to show a tag as text

03Escape it

04Escape the escape character

05How the browser decodes

Try it yourself

Find a character's entity

Break the line between 10 and km

Compare textContent and innerHTML

Code & diagrams

Break it on purpose

Nest a comment

Forget to escape an ampersand in text

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can