Lesson 32: HTML Entities and Special Characters

"In the beginning was the Word, and the Word was with God, and the Word was God." — John 1:1 (NIV)

Quest Briefing

You've built forms, marked up semantic regions, and wrangled ARIA attributes. But there's one more piece of the HTML character puzzle you need before you're truly finished with the fundamentals: HTML entities.

What happens when you need to display a < symbol inside a paragraph? Or show a copyright symbol? Or add a non-breaking space? That's what this lesson unlocks — the small but important library of special character codes that every HTML author needs to know.

Prerequisites

Lesson	Topic
Lesson 18	What is HTML?
Lesson 20	Headings and Paragraphs
Lesson 21	Text Formatting Elements

Why HTML Entities Exist

HTML uses certain characters as syntax. The browser looks for < to start a tag and > to end one. It looks for & to start an entity. If you type these characters directly in your content, the browser may misinterpret them.

<!-- This BREAKS — the browser thinks <strong> is a tag name -->
<p>Use the <strong> tag to make text bold.</p>

<!-- This is correct — the entity renders as visible < -->
<p>Use the &lt;strong&gt; tag to make text bold.</p>

HTML entities are the solution: a code that starts with & and ends with ; that represents a character the parser would otherwise misinterpret.

The Reserved Characters — Always Use Entities

These four characters have special meaning in HTML. Whenever they appear in your content (not your markup), use the entity:

Character	Entity	Name	When to use
`<`	`<`	Less than	Any `<` that isn't opening a tag
`>`	`>`	Greater than	Any `>` that isn't closing a tag (optional but good practice)
`&`	`&`	Ampersand	Any `&` that isn't starting an entity
`"`	`"`	Double quote	Inside attribute values when using double quotes
`'`	`'`	Apostrophe	Inside attribute values when using single quotes

<!-- Displaying code examples in HTML -->
<p>The syntax is: &lt;input type="text" name="q"&gt;</p>

<!-- Ampersand in company names -->
<p>Welcome to Smith &amp; Sons Consulting.</p>

<!-- Quote marks inside attributes -->
<input placeholder="Type &quot;help&quot; for assistance">

The most common entity mistake is forgetting to encode `&` in URLs inside HTML attributes. If you have a URL like `?sort=name&order=asc`, you must write it as `?sort=name&order=asc` inside an `href` attribute — otherwise the HTML validator will flag it as a malformed entity.

Named Entities — Common Symbols

Beyond the reserved characters, HTML has named entities for symbols you can't easily type on a keyboard:

Typography Symbols

Symbol	Entity	Description
©	`©`	Copyright
®	`®`	Registered trademark
™	`™`	Trademark
€	`€`	Euro sign
£	`£`	Pound sterling
¥	`¥`	Yen / Yuan
§	`§`	Section sign
¶	`¶`	Pilcrow (paragraph mark)
•	`•`	Bullet
…	`…`	Ellipsis (three dots)
—	`—`	Em dash
–	`–`	En dash
←	`←`	Left arrow
→	`→`	Right arrow
↑	`↑`	Up arrow
↓	`↓`	Down arrow
"	`“`	Left double quotation mark
"	`”`	Right double quotation mark
'	`‘`	Left single quotation mark
'	`’`	Right single quotation mark

<p>&copy; 2026 LokiSoft. All rights reserved.</p>

<p>This product is a registered trademark&reg; of LokiSoft&trade;.</p>

<p>Prices start at &euro;9.99 per month.</p>

<p>She said &ldquo;Hello, World!&rdquo; and the program ran.</p>

<p>It was a great course&mdash;better than expected.</p>

Math Symbols

Symbol	Entity	Description
×	`×`	Multiplication sign
÷	`÷`	Division sign
±	`±`	Plus-or-minus
≠	`≠`	Not equal
≤	`≤`	Less than or equal
≥	`≥`	Greater than or equal
½	`½`	One half
¼	`¼`	One quarter
¾	`¾`	Three quarters
°	`°`	Degree sign
√	`√`	Square root
∞	`∞`	Infinity

<p>The screen resolution is 1920 &times; 1080 pixels.</p>
<p>Temperature: 98.6&deg;F (37&deg;C)</p>
<p>&frac12; cup of flour, &frac14; teaspoon of salt.</p>

The Non-Breaking Space — ` `

  (non-breaking space) is one of the most-used entities, and one of the most misunderstood.

A regular space allows the browser to line-wrap text at that point. A non-breaking space tells the browser: keep these two words together — never break the line between them.

<!-- Without &nbsp; — "10" and "GB" could end up on separate lines -->
<p>Storage: 10 GB</p>

<!-- With &nbsp; — "10 GB" always stays together -->
<p>Storage: 10&nbsp;GB</p>

<!-- Other good uses -->
<p>Dr.&nbsp;Smith will see you now.</p>
<p>March&nbsp;15, 2026</p>
<p>$&nbsp;49.99</p>

Developers sometimes stack ` ` to add visual spacing. This is wrong — it's a text character, not a layout tool. Use CSS padding, margin, or gap for spacing. The only legitimate use of ` ` is to prevent line breaks between words that belong together.

Numeric Character References

In addition to named entities like ©, you can reference any Unicode character by its code point number:

Decimal format: &#NNNNN;
Hexadecimal format: &#xNNNN;

<!-- All three produce the same © symbol -->
&copy;      <!-- named entity -->
&#169;      <!-- decimal reference -->
&#xA9;      <!-- hex reference -->

<!-- Characters with no named entity — use numeric reference -->
&#128516;   <!-- 😄 emoji by decimal -->
&#x1F604;   <!-- 😄 emoji by hex -->

You'll mostly see numeric references used for:

Emoji in HTML (though direct UTF-8 is better, as explained below)
Obscure symbols with no named entity
Legacy code that predates UTF-8

Modern HTML: UTF-8 Makes Most Entities Optional

Since HTML5, every page should declare <meta charset="UTF-8"> in the <head> (you learned this in Lesson 19). With UTF-8 encoding, your HTML file can contain virtually any Unicode character directly — no entity required.

<!-- Modern approach: type the character directly -->
<p>© 2026 LokiSoft. All rights reserved.</p>
<p>Price: €9.99</p>
<p>She said "Hello, World!"</p>
<p>Temperature: 98.6°F</p>
<p>Arrow: →</p>

<!-- Also totally valid — use whichever you prefer -->
<p>&copy; 2026 LokiSoft. All rights reserved.</p>

Both approaches work equally well in modern HTML. Many developers prefer typing characters directly (©, €, →) because it's more readable. Some prefer entities because they're explicit and avoid encoding issues when files are shared between systems.

The rule is simple:

Character	What to do
`<`, `>`, `&`	Always use entities (`<`, `>`, `&`) when in content
`"` or `'` inside attributes	Use entities (`"`, `'`)
Everything else	Either direct UTF-8 or entity — your choice

In template strings, code that's generated by scripts, or XML (which is stricter than HTML), using entities is safer. If you're ever unsure whether your file will be processed correctly, entities guarantee the character survives.

Displaying Code in HTML — A Practical Pattern

This is where entities shine. Any time you're showing HTML code examples to a reader (like a tutorial, blog post, or documentation), you need to escape the angle brackets:

<p>To make text bold, use the <code>&lt;strong&gt;</code> element.</p>

<p>Here is a complete anchor tag:</p>
<pre><code>&lt;a href="https://lokisoft.xyz" target="_blank" rel="noopener noreferrer"&gt;
    LokiSoft
&lt;/a&gt;</code></pre>

This renders as:

To make text bold, use the  element.

Here is a complete anchor tag:

<a href="https://lokisoft.xyz" target="_blank" rel="noopener noreferrer">
    LokiSoft
</a>

The <pre> element preserves whitespace and line breaks. The <code> element marks content as computer code (semantic). The < and > render as visible < and >.

Quick Reference Card

Here's a cheat sheet to bookmark:

What you want	Entity to use
`<` visible	`<`
`>` visible	`>`
`&` visible	`&`
Non-breaking space	` `
©	`©`
®	`®`
™	`™`
€	`€`
£	`£`
" (curly left)	`“`
" (curly right)	`”`
— (em dash)	`—`
– (en dash)	`–`
×	`×`
÷	`÷`
°	`°`
…	`…`
→	`→`
←	`←`

Knowledge Check

Use for bold text — works fine as written

Use [strong] for bold text — use brackets instead of angle brackets

Use for bold text — escape both angle brackets with entities

Use for bold text — use the data-escape attribute

To add indentation to the beginning of a paragraph, like a printed book's first-line indent

To keep two adjacent words on the same line — like '10 GB' so the number and unit never split across lines

To add three spaces of visual padding between two words

To represent an empty table cell that the browser won't collapse

<, >, and & — they are HTML syntax characters and must be escaped in content

All non-ASCII characters — UTF-8 is not supported in modern HTML5

Space characters — all spaces must use   for correct rendering

–

−

&hyphen;

—

How Did You Do?

4/4 — You've got HTML entities locked down. Your text will render correctly in any browser.

3/4 — Solid grasp. Re-read the section on reserved characters and   usage.

2/4 or below — Revisit the whole lesson before moving on — entities are simple but trip up a lot of developers.

What's Next

Entities are complete. In Lesson 33, you'll tackle the most important cross-cutting concern in all of front-end development: Accessibility in HTML — writing web pages that work for every human, including those using screen readers, keyboard-only navigation, and assistive technologies. It's not optional — it's part of your craft.

A Prayer for Clarity in Communication

Lord, You are the God of all language — you spoke the universe into existence, and You gave humanity the gift of words. As these students learn to precisely communicate meaning to browsers, search engines, and assistive technologies, may they carry that same care for precision into how they communicate with the people around them.

May they be developers who attend to the details — who notice when something might be misread, misunderstood, or inaccessible — and who fix it with patience and craftsmanship.

In Jesus' name, Amen.

"Let your conversation be always full of grace, seasoned with salt, so that you may know how to answer everyone." — Colossians 4:6 (NIV)