HTML Entities: <, &,   and Special Characters

What you will learn

Try writing a paragraph that talks about the <p> tag itself, or a sentence with an & in it, and something breaks — the browser tries to interpret your text as actual HTML instead of displaying it. Character entities are HTML’s solution: a safe way to write reserved characters, symbols, and characters your keyboard can’t easily type. In this lesson you will learn why entities exist, the ones you’ll actually use, and the difference between named and numeric entities.

The problem: some characters are reserved

HTML uses a handful of characters to do its own job of marking up tags and attributes: <, >, &, and quote marks inside attribute values. That creates a genuine conflict — what happens when your actual content needs to contain one of those characters?

<p>To write a paragraph, use the <p> tag.</p>

This looks reasonable, but it is broken. The browser sees <p> in the middle of your sentence and treats it as the start of a real, new paragraph element — not as text you wanted displayed. Your intended sentence gets cut apart, and the page shows something completely different from what you typed.

<p>Tom & Jerry is a classic cartoon.</p>

This one often looks fine in a browser today (most browsers are forgiving about a lone &), but it is technically invalid HTML, and it can genuinely break in specific situations — for example, if what follows & happens to look like the start of a real entity name.

The solution: character entities

A character entity is special text, always starting with & and ending with ;, that the browser converts into one specific character when it renders the page — safely, without being interpreted as markup.

<p>To write a paragraph, use the &lt;p&gt; tag.</p>
<p>Tom &amp; Jerry is a classic cartoon.</p>

This now displays exactly as intended: “To write a paragraph, use the <p> tag.” and “Tom & Jerry is a classic cartoon.” — because < and > become literal < and > characters on screen, and & becomes a literal &, none of which the browser tries to interpret as markup.

The essential entities: <, >, &, quotes

These four are the ones you genuinely must know, because they’re the characters HTML itself uses for markup:

Character	Entity	When you need it
<	&lt;	Writing about HTML tags, or a “less than” comparison
>	&gt;	Writing about HTML tags, or a “greater than” comparison
&	&amp;	Any literal ampersand in your text
"	&quot;	A literal double quote, most often needed inside an attribute value
'	&apos;	A literal apostrophe, most often needed inside a single-quoted attribute value

<p>5 &lt; 10 and 10 &gt; 5.</p>
<p>Save &amp; Continue</p>
<p>She said, &quot;Let's begin.&quot;</p>

When do you actually need to escape a quote?

This is a common point of confusion. In ordinary paragraph text, plain straight quotes (", ') are perfectly fine and need no entity at all:

<!-- This is fine, no entity needed -->
<p>She said, "Let's begin."</p>

You only genuinely need " when a quote character would otherwise end an attribute value early:

<!-- Broken: the quote inside "5" foot 6" tall" ends the attribute early -->
<img src="photo.jpg" alt="He is 5" foot 6" tall">

<!-- Fixed with an entity -->
<img src="photo.jpg" alt="He is 5&quot; foot 6&quot; tall">

In practice, this situation is rare if you write clean HTML — but it’s worth understanding exactly why the entity exists for this character, rather than escaping quotes everywhere out of habit.

Useful symbol entities

Beyond the four “must-know” ones, HTML has hundreds of named entities for symbols you can’t easily type on a keyboard:

Symbol	Entity	Meaning
©	©	Copyright
®	®	Registered trademark
™	™	Trademark
—	—	Em dash (a long dash, for a break in a sentence)
–	–	En dash (a shorter dash, often used in ranges like “9–5”)
…	…	Ellipsis
°	°	Degree symbol
₹	₹	Indian Rupee sign (no short named entity — see numeric entities below)
€	€	Euro sign
×	×	Multiplication sign (not the letter x)
÷	÷	Division sign

<p>&copy; 2026 MyCodeNest &mdash; All rights reserved.</p>
<p>Office hours: 9&ndash;5, Monday to Friday.</p>
<p>Room dimensions: 10 &times; 12 feet.</p>

 : the non-breaking space

You learned early on that HTML collapses whitespace — any run of spaces becomes just one.   is a special kind of space that does two extra things a normal space doesn’t:

1. It never collapses, even next to other spaces.
2. The browser will never break a line at an   — the words on either side of it always stay together, even if the line would otherwise wrap between them.

<p>5&nbsp;kg of rice costs Rs&nbsp;250.</p>

That second property is the real reason to reach for  : to stop an ugly, confusing line-wrap in the middle of something that should visually stay together, like a number and its unit (“5 kg”), an initial and a surname (“A. Sharma”), or a value and a following symbol.

<p>Temperature: 36.6&nbsp;°C</p>
<p>See page&nbsp;42 for details.</p>

Don’t misuse   for general spacing or indentation. Stacking several   in a row to “push text over” mixes layout into your content — exactly the mistake you learned to avoid with stacked <br> tags. For real spacing and indentation, use CSS margin or padding instead. Reserve   specifically for keeping two short, related pieces of text from being separated by a line break.

Numeric entities: for anything without a name

Not every character has a friendly named entity like ©. Every character can also be written as a numeric entity, using its Unicode code point:

<p>&#169; 2026 MyCodeNest</p>   <!-- same result as &copy; -->
<p>Price: &#8377;499</p>        <!-- ₹, no short named entity exists -->
<p>&#9733; Featured item</p>    <!-- ★ -->

• © — decimal form: &#, then the character’s decimal Unicode number, then ;.
• © — hexadecimal form (less common to type by hand, but you’ll see it in some generated code): &#x, then the number in hex, then ;.

You look up a character’s numeric code the same way you’d look up any named entity you don’t have memorised — by searching for the character (like “rupee symbol HTML entity”) rather than memorising code tables.

A simpler alternative: just save the file as UTF-8

You don’t actually need an entity for every special character. If your HTML file is saved with UTF-8 encoding (which you signal with <meta charset="UTF-8"> in the <head> — something you’ve been writing since the very first lesson), you can often type many symbols and accented letters directly:

<p>Café — a lovely spot for coffee. ★★★★☆</p>

This works fine for many symbols and most accented letters (é, ñ, ü). Entities remain necessary specifically for the reserved markup characters (<, >, &), and remain a safe, reliable fallback for any character you’re not sure will paste or type correctly everywhere.

Common mistakes

• Writing a literal < or > in visible text, breaking your page’s structure without realising it.
• Forgetting to escape & when it’s followed by letters that could accidentally look like the start of a real entity name.
• Escaping quotes inside ordinary paragraph text unnecessarily. Plain " and ' are fine there; "/' are mainly needed inside attribute values.
• Stacking multiple   to fake spacing or indentation. Use CSS margin/padding instead.
• Forgetting the trailing semicolon on an entity, like &copy instead of ©. Many browsers will still render it, but it’s invalid and can behave inconsistently.
• Using the wrong dash. A hyphen (-) is for compound words; – is for ranges like “9–5”; — is for a sentence break — mixing them up is a small but noticeable polish issue.

Interview-style questions

Why can’t you just type < directly in your page’s visible text? Because the browser reserves < to mark the start of a tag; typing it directly in content can be misread as the beginning of an element and break your page’s structure. Use < instead.

What is the difference between a named entity and a numeric entity? A named entity uses a memorable word, like ©. A numeric entity uses the character’s Unicode code point, like © — the same character, written differently. Numeric entities cover characters that have no named entity.

When should you actually use " in your HTML? Mainly inside an attribute value, when a literal quote character would otherwise prematurely end that attribute — plain quotes in ordinary paragraph text don’t need escaping.

What does   do differently from a normal space? It never collapses and the browser will never wrap a line at it, keeping the text on either side of it together — useful for things like “5 kg” or “Rs 250” that shouldn’t be split across two lines.

Practice

1. Use the Practice in Editor button. Change the numeric rupee entity (₹) to a different currency’s numeric or named entity of your choice.

2. Write a sentence describing an HTML tag of your choice (like <img>), correctly escaped so the tag name displays as visible text instead of being interpreted as markup.

3. Add   between a number and its unit somewhere in your own writing, and explain why it’s better than a normal space there.

4. Fix this code (it has two mistakes: an unescaped < breaking the paragraph, and an unnecessary quote escape in ordinary text):

   <p>Use the <strong> tag to make text bold.</p>
   <p>She said, &quot;Let's go!&quot;</p>

Recap

• HTML reserves <, > and & for markup — write them as <, > and & when they appear as literal content.
• "/' matter mainly inside attribute values, not ordinary paragraph text.
• Named entities (©, —, ×) cover common symbols; numeric entities (©, ₹) cover anything without a memorable name.
•   is a non-breaking, non-collapsing space — use it to keep short related text together, never as a general spacing tool.
• With <meta charset="UTF-8"> set, many symbols and accented characters can be typed directly; entities remain essential for the reserved markup characters.