|$ curl https://forge-ai.dev/api/markdown?path=docs/html/entities

$cat docs/html-entities.md

updated Last week·16 min read·published

HTML Entities

◆HTML◆Beginner◆Entities◆Beginner🎯Free Tools

Introduction

HTML entities — also called character references — are special codes that represent reserved characters, invisible characters, or characters that are difficult to type on a keyboard. They ensure your content renders correctly regardless of the character encoding of the document.

Entities are essential for displaying characters that have special meaning in HTML (like < and >), showing Unicode symbols, and handling characters that are ambiguous or impossible to type directly. Every web developer needs to understand entities to write valid, correct HTML.

Why Entities Exist

HTML uses certain characters as structural delimiters — the angle brackets < and > define tags, and & starts an entity reference. If you try to display these characters literally in your content, the browser will misinterpret your markup. Entities solve this problem by providing alternative representations:

entities-why.html

HTML

1	<!-- Without entities: browser thinks this is a broken tag -->
2	<p>5 < 10 && 10 > 3</p>
3
4	<!-- With entities: characters render correctly -->
5	<p>5 < 10 && 10 > 3</p>
6
7	<!-- In code examples, you need entities for every tag -->
8	<p>To create a heading, write <h1>Title</h1></p>
9
10	<!-- Without entities, the browser would parse <h1>Title</h1> as a heading -->
11	<p>To create a heading, write <h1>Title</h1></p>

⚠

warning

The three characters that must be escaped in HTML content are: & (as &), < (as <), and > (as >). Failing to escape these will produce broken markup or unintended content.

Named Entities

Named entities use a human-readable name preceded by an ampersand and followed by a semicolon. The most commonly used named entities are:

Entity	Character	Description
&	&	Ampersand
<	<	Less-than sign
>	>	Greater-than sign
"	"	Double quotation mark
'	'	Apostrophe / single quote
		Non-breaking space
©	©	Copyright symbol
®	®	Registered trademark
™	™	Trademark symbol
—	—	Em dash
–	–	En dash
…	…	Horizontal ellipsis

named-entities.html

HTML

1	<!-- Five essential named entities -->
2	<p>5 < 10 is true, and 10 > 5 is also true.</p>
3	<p>She said "hello" and waved.</p>
4	<p>It's a beautiful day outside.</p>
5
6	<!-- Non-breaking space: prevents line breaks -->
7	<p>Buy  10  Get 5 Free!</p>
8	<p>Dr. Jane Smith is speaking at 3:00 PM.</p>
9
10	<!-- Common typographic entities -->
11	<p>This is an em dash—used for emphasis.</p>
12	<p>This is an en dash–used for ranges (2020–2026).</p>
13	<p>This sentence ends with an ellipsis…</p>
14
15	<!-- Legal and commercial symbols -->
16	<p>© 2026 ForgeLearn. All rights reserved.</p>
17	<p>This product is ® registered.</p>
18	<p>™ and ® are registered trademarks.</p>
19
20	<!-- Currency symbols -->
21	<p>€ £ ¥ ¢ ¤</p>
22
23	<!-- Math and comparison -->
24	<p>± 0.5 × 100 ÷ 2 = 25</p>
25	<p>≠ ≤ ≥ ∞</p>

Numeric Entities

Numeric entities use the character's Unicode code point. There are two formats: decimal (base 10) and hexadecimal (base 16, prefixed with x). Both produce the same character:

numeric-entities.html

HTML

1	<!-- Decimal numeric entities: &# followed by decimal code point -->
2	<p>A B C (A, B, C)</p>
3	<p>€ (euro sign, same as €)</p>
4	<p>— (em dash, same as —) </p>
5
6	<!-- Hexadecimal numeric entities: &#x followed by hex code point -->
7	<p>A B C (A, B, C)</p>
8	<p>€ (euro sign)</p>
9	<p>— (em dash)</p>
10
11	<!-- Same character, different representations -->
12	<p>Hello = Hello (decimal)</p>
13	<p>Hello = Hello (hexadecimal)</p>
14
15	<!-- Unicode symbols with no named entity -->
16	<p>😀 🚀 ❤ 💥</p>
17	<p>☃ ☂ ☕ ☁</p>
18
19	<!-- Combining characters -->
20	<p>é è ê ë</p>
21	<p>ñ ü ö ä</p>

ℹ

info

Use named entities when available — they are more readable. Use numeric entities for characters without a named equivalent, especially symbols, emoji, and characters from non-Latin scripts. The W3C maintains a complete list of named HTML entities at https://html.spec.whatwg.org/multipage/named-characters.html.

Special Characters

Beyond the five essential escaping entities, HTML provides named references for hundreds of characters. These include mathematical operators, arrows, currency symbols, Greek letters, and more:

special-characters.html

HTML

1	<!-- Arrows -->
2	<p>← → ↑ ↓</p>
3	<p>↔ &larrr; &rarrr;</p>
4	<p>← → ↑ ↓</p>
5
6	<!-- Mathematical symbols -->
7	<p>± × ÷ ≠ ≤ ≥</p>
8	<p>∞ ∑ ∏ ∫</p>
9	<p>√ ∂ ∇ ∀ ∃</p>
10
11	<!-- Greek letters -->
12	<p>α β γ δ ε</p>
13	<p>θ λ σ ω π</p>
14
15	<!-- Punctuation and formatting -->
16	<p>« » “ ”</p>
17	<p>‘ ’ &sbquo; &bdquo;</p>
18
19	<!-- Whitespace entities -->
20	<p>Word1&ensp;Word2&ensp;Word3</p>
21	<p>Word1&emsp;Word2&emsp;Word3</p>
22	<p>One&Tab;Two&Tab;Three</p>
23	<p>Line1&NewLine;Line2</p>
24
25	<!-- Invisible characters -->
26	<p>Softhyphen for word wrapping.</p>
27	<p>This&NoBreak;text stays together.</p>

When to Use Entities

While entities are sometimes necessary, modern UTF-8 encoding means you can type most characters directly. Use entities only when the character has special meaning in HTML or when you need to guarantee correct rendering:

Scenario	Use Entity?	Alternative
& in text	Yes — &	None — must escape
< in text	Yes — <	None — must escape
> in text	Recommended — >	Browsers usually handle bare >
" in attributes	Recommended — "	Use single quotes for attribute value
© symbol	Optional — ©	Type © directly (UTF-8 supports it)
Non-breaking space	Yes —	CSS white-space: nowrap or white-space: pre
Em dash —	Optional — —	Type — directly (UTF-8 supports it)
Emoji	Optional — numeric	Type emoji directly (UTF-8 supports it)

when-to-use.html

HTML

1	<!-- MUST use entities: reserved characters in HTML -->
2	<p>Tom & Jerry — the classic cartoon.</p>
3	<p>Math: 2 < 5 & 5 > 2</p>
4	<p>HTML tutorial: use <p> for paragraphs.</p>
5
6	<!-- MUST use entities: inside attribute values with matching quotes -->
7	<a href="/search?q=rock+%26+roll" title="Rock & Roll">Search</a>
8	<input type="text" data-placeholder="Type <value> here">
9
10	<!-- OPTIONAL: non-breaking space prevents line break -->
11	<p>
12	Price: $1,299 USD
13	— limited time offer!
14	</p>
15
16	<!-- OPTIONAL: typographic characters for professional content -->
17	<p>The CEO—Jane Doe—announced record revenue …</p>
18
19	<!-- AVOID: unnecessary entities for plain UTF-8 text -->
20	<p>© 2026 ForgeLearn</p>
21	<p><!-- Better: just type the character directly --> © 2026 ForgeLearn</p>

✓

best practice

With UTF-8 encoding (which is the default for HTML5), you can type most characters directly — em dashes, accented letters, currency symbols, and even emoji. Reserve entities for the three mandatory escapes (& < >), non-breaking spaces, and when you need to display literal HTML tags in documentation or tutorials.

Non-Breaking Spaces

The   entity is one of the most useful HTML entities. It creates a space that prevents a line break at that point and also collapses multiple consecutive regular spaces into one in HTML rendering:

non-breaking-spaces.html

HTML

1	<!-- Prevent line breaks in specific content -->
2	<p>
3	Dr. Jane Smith<br>
4	123 Main Street<br>
5	New York, NY 10001
6	</p>
7
8	<!-- Prices and units should stay together -->
9	<p>
10	Starting at $29.99/month<br>
11	Only 3 left in stock<br>
12	Delivery in 2 business days
13	</p>
14
15	<!-- Multiple nbsp creates visible spacing -->
16	<p>Column1    Column2    Column3</p>
17
18	<!-- Preventing orphans in headings -->
19	<h2>The Complete Guide to Web Development</h2>
20
21	<!-- Non-breaking hyphen: prevents break at hyphenated words -->
22	<p>This text will never break.</p>
23	<p>Long-word-really-long-word with &NoBreak;non&NoBreak;break&NoBreak;hyphens.</p>
24
25	<!-- CSS alternative for preventing line breaks -->
26	<p style="white-space: nowrap">This entire line will not wrap at all.</p>
27	<p style="text-align: justify">Justified text with  multiple spaces  preserved.</p>

ℹ

info

CSS offers alternatives to   for most use cases: white-space: nowrap prevents wrapping entirely, word-break: keep-all prevents breaks within words, and white-space: pre preserves whitespace. Use   when you need fine-grained control over individual space characters.

Live Demo

Here is a preview showing named entities, numeric entities, and non-breaking spaces in rendered HTML:

preview

Best Practices

◆Always escape & < and > in HTML content — these three are mandatory to avoid broken markup

◆Use numeric entities for characters without named equivalents (emoji, rare symbols)

◆Use &nbsp; to prevent line breaks in specific places (names, prices, units)

◆With UTF-8 encoding, most characters can be typed directly — entities are not always needed

◆In attribute values with double quotes, escape inner double quotes as &quot;

◆Never use entities in element names or attribute names — only in content and attribute values

◆Use &#8203; (zero-width space) for fine-grained line break control when needed

◆When displaying HTML code in tutorials, escape every tag character so it renders as text

◆Test your entities in multiple browsers — obscure numeric entities may render differently

$ForgeLearn — Engineering Documentation·Section ID: HTML-16·Revision: 1.0

X GitHub YouTube Instagram Facebook Discord Telegram Buy me a coffee Sponsor