HTML Entities: Complete Guide to HTML Character References

What Are HTML Entities?

HTML entities are special codes used in HTML to represent characters that have a special meaning in HTML or characters that are difficult to type, display, or encode directly.

For example, the less-than symbol < is used by HTML to start a tag. If you want to display an actual less-than symbol as text on a webpage, you should use the HTML entity <.

<p>5 &lt; 10</p>

The browser displays:

5 < 10

HTML entities are also useful for displaying symbols such as:

• © → ©
• ® → ®
• ™ → ™
• € → €
•   → non-breaking space
• ♥ → ♥
• & → &

HTML entities are sometimes called character entities, HTML character references, or simply entities.

Why Are HTML Entities Needed?

HTML uses certain characters as part of its syntax. This creates a problem when you want to show those characters as normal text.

Consider this example:

<p>Use <p> tags to create paragraphs.</p>

The browser does not treat the first <p> as ordinary text. It interprets it as an HTML element.

To display the tag itself, write:

<p>Use &lt;p&gt; tags to create paragraphs.</p>

The browser then displays:

Use tags to create paragraphs.

Entities are therefore important when a character could otherwise be interpreted as HTML markup.

How HTML Entities Work

Most named HTML entities follow this pattern:

&name;

For example:

&

represents the ampersand character:

&

An entity can also be written using a decimal numeric character reference:

&

or a hexadecimal numeric character reference:

&

All three represent the same character:

&

The Three Common Forms

HTML character references can generally be written in three forms:

Named entities are usually easier for humans to read, while numeric references are useful when a named entity is unavailable or when working with Unicode characters.

The Most Important HTML Entities

Several entities are used very frequently in HTML.

Ampersand

&

Displays:

&

Example:

<p>HTML &amp; CSS</p>

Output:

HTML & CSS

The ampersand is especially important because it begins an HTML character reference.

Less-Than Sign

<

Displays:

<

Example:

<p>10 &lt; 20</p>

Output:

10 < 20

Greater-Than Sign

>

Displays:

>

Example:

<p>20 &gt; 10</p>

Output:

20 > 10

Although > can often appear directly in text, using > can make markup clearer and avoids ambiguity in some contexts.

Double Quotation Mark

"

Displays:

"

Example:

<p>He said &quot;Hello&quot;.</p>

Output:

He said “Hello”.

Quotation marks are particularly important when they appear inside HTML attribute values.

Apostrophe

'

Displays:

'

Example:

<p>It&apos;s a beautiful day.</p>

Output:

It’s a beautiful day.

Non-Breaking Space

 

creates a non-breaking space.

Unlike a normal space, a non-breaking space prevents the browser from breaking the line at that position.

For example:

<p>10&nbsp;kg</p>

The browser displays:

10 kg

The space between 10 and kg is treated as non-breaking.

However,   should not normally be used to create page layout or large gaps. CSS is the appropriate tool for spacing and layout.

HTML Entities for Symbols

HTML provides many named entities for common symbols.

Example:

<p>The temperature is 30&deg;C.</p>

Output:

The temperature is 30°C.

Copyright, Trademark, and Legal Symbols

Entities are often used for copyright and trademark notices.

<footer>
  <p>&copy; 2026 Example Company. All rights reserved.</p>
</footer>

Output:

© 2026 Example Company. All rights reserved.

Trademark example:

<p>Example&trade;</p>

Output:

Example™

Registered trademark example:

<p>Example&reg;</p>

Output:

Example®

Currency HTML Entities

HTML entities can represent many currency symbols.

For example:

<p>Price: &#8377;999</p>

Output:

Price: ₹999

For modern HTML documents, directly using Unicode characters such as ₹ is also normally fine when the document is correctly encoded as UTF-8.

Mathematical HTML Entities

HTML entities can be useful for mathematical symbols.

<p>x &plusmn; y</p>
<p>a &times; b</p>
<p>a &divide; b</p>
<p>x &le; 100</p>
<p>x &ge; 10</p>

The browser displays:

x ± y

a × b

a ÷ b

x ≤ 100

x ≥ 10

For complex mathematical notation, MathML or other specialized approaches may be more appropriate than large collections of HTML entities.

Arrows and Directional Symbols

HTML supports many arrow-related entities.

Examples include:

←
→
↑
↓
↔

They produce:

← → ↑ ↓ ↔

Other examples include:

⇐
⇒
⇑
⇓
⇔

These can produce double arrows such as:

⇐ ⇒ ⇑ ⇓ ⇔

They can be useful for simple text-based symbols, instructions, and visual indicators.

Greek Letters

HTML entities can represent Greek letters.

Examples:

α
β
γ
δ
ε
θ
λ
μ
π
σ
ω

They display as:

α β γ δ ε θ λ μ π σ ω

Uppercase Greek letters are also available.

Α
Β
Γ
Δ
Θ
Λ
Π
Σ
Ω

These produce corresponding Greek characters.

Fractions

HTML provides entities for some common fractions.

Example:

<p>Half: &frac12;</p>

Output:

Half: ½

For arbitrary mathematical fractions, it is generally better to use appropriate mathematical markup rather than relying on a precomposed fraction character.

Quotation Marks and Typography

HTML entities can also represent typographic punctuation.

Examples include:

“
”
‘
’
…
–
—

They produce:

“ ” ‘ ’ … – —

For example:

<p>&ldquo;Learning HTML is useful.&rdquo;</p>

Output:

“Learning HTML is useful.”

The ellipsis entity:

…

produces:

…

The en dash:

–

produces:

–

The em dash:

—

produces:

—

HTML Entities and Unicode

Modern HTML is based heavily on Unicode, which allows documents to represent characters from languages and writing systems around the world.

For example:

<p>नमस्ते</p>
<p>ଓଡ଼ିଆ</p>
<p>你好</p>
<p>こんにちは</p>
<p>مرحبا</p>

These characters can normally be written directly in an HTML document when UTF-8 encoding is used.

A typical HTML document should include:

<meta charset="UTF-8">

This tells the browser which character encoding the document uses.

HTML entities are therefore not a replacement for Unicode. They are one way of representing characters when that representation is useful or necessary.

Numeric Character References

A character can be represented by its Unicode code point using a numeric character reference.

Decimal Form

The syntax is:

&#number;

Example:

©

displays:

©

Another example:

₹

displays:

₹

Hexadecimal Form

The syntax is:

&#xnumber;

For example:

©

displays:

©

And:

₹

displays:

₹

The hexadecimal form begins with &#x and ends with ;.

Named Entities vs Numeric References

Both approaches can represent the same character.

For example, the copyright symbol can be written as:

©

or:

©

or:

©

All produce:

©

Named entities are often easier to understand:

©

Numeric references are useful when:

• A named entity is not available.
• You are working directly with a Unicode code point.
• You need a character that is uncommon.
• You are generating HTML programmatically.

For everyday HTML, use the clearest representation for the situation.

HTML Entities Inside Attributes

Entities can also be used inside HTML attributes.

For example:

<input type="text" value="Tom &amp; Jerry">

The browser interprets & as &.

Another example:

<p title="Tom &amp; Jerry">Cartoon</p>

The title is displayed as:

Tom & Jerry

Correct character escaping is especially important when inserting dynamic data into attributes.

HTML Entities and the Ampersand

The ampersand has special significance because it starts a character reference.

For example:

©

begins with &.

If you need to display a literal ampersand in HTML text, the safest and clearest representation is:

&

For example:

<p>HTML &amp; CSS</p>

Output:

HTML & CSS

This becomes especially important when text contains sequences that might otherwise be interpreted as character references.

HTML Entities for Reserved Characters

The most important reserved characters in HTML include:

<
>
&
"
'

Common entity forms are:

For example:

<p>&lt;h1&gt;Hello&lt;/h1&gt;</p>

The browser displays:

<h1>Hello</h1>

This is useful when writing tutorials about HTML because the markup needs to be displayed as text instead of being interpreted by the browser.

HTML Entities in Code Examples

HTML tutorials frequently use entities when showing source code.

Suppose you want to show this HTML:

<a href="https://example.com">Example</a>

Inside an HTML page, you need to escape the angle brackets if you want the browser to display them literally:

<p>&lt;a href=&quot;https://example.com&quot;&gt;Example&lt;/a&gt;</p>

However, for larger code examples, the <pre> and <code> elements are usually used:

<pre><code>&lt;a href=&quot;https://example.com&quot;&gt;Example&lt;/a&gt;</code></pre>

This lets the browser display the code rather than interpret it as actual page markup.

HTML Entities and Whitespace

HTML normally collapses consecutive ordinary spaces in rendered text.

For example:

<p>Hello     World</p>

will generally appear as:

Hello World

A non-breaking space can be used when a space should not be treated as an ordinary breakable space:

<p>Hello&nbsp;&nbsp;World</p>

However, using many   entities to control layout is poor practice.

Instead of:

<p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;World</p>

use CSS:

<p class="example">Hello World</p>

and control spacing with CSS.

When Should You Use HTML Entities?

HTML entities are useful when:

1. You need to display reserved HTML characters.
2. A character has a useful named entity.
3. You need to represent a Unicode code point.
4. You want a character to remain unbroken with  .
5. You are displaying HTML syntax as text.
6. You need special typographic symbols.
7. You are working with generated or escaped HTML content.

When Should You Avoid HTML Entities?

You do not need an entity for every special-looking character.

Modern HTML supports UTF-8, so characters can often be written directly.

For example:

<p>Welcome to Odisha — ନମସ୍କାର!</p>

There is usually no need to replace every character with a numeric entity.

Using readable Unicode text can make source code easier to maintain.

Entities should be used when they solve a real problem rather than simply because a character looks unusual.

HTML Entities vs CSS

HTML entities represent characters. CSS controls presentation.

For example, do not use:

<p>&nbsp;&nbsp;&nbsp;&nbsp;Hello</p>

just to move text to the right.

Use CSS instead:

<p class="message">Hello</p>

.message {
  margin-left: 40px;
}

This separation makes websites cleaner, more responsive, and easier to maintain.

HTML Entities vs Images

A symbol does not always need to be represented by an image.

For example, a copyright symbol can simply be written as:

©

instead of creating an image containing ©.

Text characters are generally easier for browsers, search engines, assistive technologies, and responsive layouts to handle.

For decorative icons, however, SVG or an appropriate icon system may be more suitable.

HTML Entities and Accessibility

Entities themselves do not automatically make a webpage accessible.

Accessibility depends on how content is used.

For example:

<p>&hearts; Our services</p>

may be visually understandable, but decorative symbols should not replace meaningful text.

A screen reader may interpret symbols differently depending on the character and assistive technology.

For important information, use meaningful words instead of relying only on symbols.

Poor example:

<p>✓</p>

Better:

<p>Task completed</p>

You can then use CSS or an appropriate icon for visual decoration.

HTML Entities and Security

HTML entity encoding is also important for security.

When untrusted user input is inserted into HTML, characters such as <, >, ", and & can have special meanings.

For example, directly inserting untrusted input into HTML can create a cross-site scripting (XSS) risk.

A safe implementation should use the appropriate output-encoding mechanism for the specific HTML context.

Simply replacing a few characters manually is not a complete security strategy.

Developers should use established escaping functions provided by their programming language, framework, template engine, or security library.

HTML Entity Encoding Is Context-Sensitive

One important concept is that escaping depends on where data is placed.

Text content, an HTML attribute, a JavaScript string, a CSS value, and a URL have different parsing rules.

For example, HTML escaping does not automatically make data safe for JavaScript.

Therefore:

HTML escaping should be used for HTML contexts, while JavaScript, CSS, URL, and other contexts require their own appropriate handling.

This is an important security principle for web developers.

Common Mistakes With HTML Entities

Mistake 1: Forgetting the Semicolon

A character reference normally ends with ;.

Correct:

&

It is good practice to use the complete form.

Mistake 2: Using the Wrong Entity

For example:

<

means <, while:

>

means >.

Using the wrong entity produces the wrong character.

Mistake 3: Using   for Layout

Avoid using dozens of non-breaking spaces for visual positioning.

Use CSS instead.

Mistake 4: Escaping Everything Unnecessarily

Modern HTML and UTF-8 support many characters directly.

There is usually no need to convert ordinary Unicode text into numeric entities.

Mistake 5: Confusing HTML Entities With URL Encoding

HTML entity encoding and URL encoding are different.

For example:

&

is an HTML character reference.

A URL may use percent encoding such as:

%20

These mechanisms serve different purposes and should not be confused.

A Useful HTML Entity Cheat Sheet

Reserved Characters

&lt;       <
&gt;       >
&amp;      &
&quot;     "
&apos;     '

Spaces and Punctuation

      non-breaking space
…   …
–    –
—    —

Legal Symbols

©     ©
®      ®
™    ™

Currency

¢     ¢
£    £
¥      ¥
€     €

Mathematics

±   ±
×    ×
÷   ÷
≠       ≠
≤       ≤
≥       ≥
∞    ∞

Arrows

←     ←
→     →
↑     ↑
↓     ↓
↔     ↔

Practical Example

Here is a small HTML page demonstrating several entities:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Entities Example</title>
</head>
<body>

  <h2>HTML Entities</h2>

  <p>5 &lt; 10</p>
  <p>10 &gt; 5</p>
  <p>HTML &amp; CSS</p>
  <p>&quot;Hello World&quot;</p>
  <p>Copyright &copy; 2026</p>
  <p>Price: &#8377;999</p>
  <p>Temperature: 30&deg;C</p>
  <p>Half: &frac12;</p>
  <p>Direction: &rarr;</p>
  <p>Greek letter: &pi;</p>

</body>
</html>

This example shows how HTML entities can be used for reserved characters, symbols, currency, mathematics, typography, and Unicode characters.

HTML Entities and Modern HTML

HTML5 significantly expanded the set of named character references and standardized how character references are handled.

Modern browsers have strong Unicode support, so developers generally do not need to depend on entities for ordinary international text.

A good modern HTML document should normally:

• Use UTF-8.
• Declare the character encoding.
• Use Unicode characters directly when that improves readability.
• Escape characters when required by HTML syntax.
• Use named entities when they make source code clearer.
• Avoid using entities for CSS layout.
• Encode untrusted output according to its context.

Frequently Asked Questions

What is an HTML entity?

An HTML entity, more precisely called an HTML character reference, is a special notation used to represent a character in HTML.

Example:

&

represents &.

Why do we use < in HTML?

< has a special meaning in HTML because it begins markup. < lets you display the less-than character as ordinary text.

What does & mean?

& represents the ampersand character &.

What does   mean?

  represents a non-breaking space. It prevents the browser from breaking the line at that space.

Can I use Unicode characters directly in HTML?

Yes. With a properly encoded UTF-8 HTML document, you can normally use Unicode characters directly.

<p>₹100 — ନମସ୍କାର</p>

Are HTML entities case-sensitive?

Named character references can have specific names defined by HTML. You should use the exact standardized spelling rather than assuming that changing capitalization will work.

Is © better than ©?

Both represent the copyright symbol. © is generally easier for humans to understand, while numeric references can be useful for Unicode code points.

Should I use HTML entities for every special character?

No. Use them when they are useful or required. UTF-8 allows most characters to be written directly.

Are HTML entities the same as Unicode?

No. Unicode is a universal character-encoding and character-repertoire standard. HTML character references are a way of representing characters within HTML.

Are HTML entities related to SEO?

Entities themselves are not an SEO ranking technique. Their main purpose is correct character representation and HTML parsing. Good HTML, readable content, accessibility, and proper encoding are much more important.

Are HTML entities still used in HTML5?

Yes. HTML5 supports named and numeric character references. They remain useful for reserved characters and many special symbols.

Best Practices for Using HTML Entities

Follow these practical rules:

1. Use < when displaying < as text.
2. Use > when appropriate for displaying >.
3. Use & for a literal ampersand when HTML parsing requires escaping.
4. Use " and ' when appropriate in HTML contexts.
5. Use UTF-8 for modern websites.
6. Declare UTF-8 with <meta charset="UTF-8">.
7. Use Unicode directly when it improves readability.
8. Use   only when a non-breaking space is actually needed.
9. Do not use entities to create page layout.
10. Use CSS for spacing and visual design.
11. Escape untrusted data using context-appropriate security mechanisms.
12. Remember that HTML escaping is not the same as JavaScript, CSS, or URL encoding.
13. Prefer clear, maintainable source code.
14. Use semantic HTML and accessibility-friendly text.
15. Use named entities when their meaning is clearer than a numeric code.

Final Thoughts

HTML entities are a small but important part of HTML. They allow developers to represent reserved characters, symbols, punctuation, mathematical signs, currencies, and many other characters safely and clearly.

The most important entities to remember are:

&lt;    <
&gt;    >
&amp;   &
&quot;  "
&apos;  '
&nbsp;  non-breaking space

Modern websites can display a huge range of characters directly through UTF-8, so entities should not be overused. Their greatest value is in situations where HTML syntax could conflict with the character being displayed, or where a named character reference makes the source code easier to understand.

For beginners, the key idea is simple: HTML entities are character references that help HTML display special characters correctly. Once you understand reserved characters, named references, numeric references, Unicode, and context-specific escaping, you can use HTML entities confidently and write cleaner, safer, and more maintainable web pages.