HTML Entities: Syntax, Usage, and Examples

HTML entities let you represent reserved characters, symbols, or invisible characters in HTML. You can use them to display characters that browsers would otherwise interpret as code or to include symbols that aren't available on a keyboard.

How to Use HTML Entities

Each HTML entity consists of an ampersand (&), followed by a name or number, and ends with a semicolon (;).

Basic Syntax

<p>5 &gt; 3 is a true statement.</p>

This example displays:

5 > 3 is a true statement.

Commonly Used HTML Entities

• < → < (Less than)
• > → > (Greater than)
• & → & (Ampersand)
• " → " (Double quote)
• ' → ' (Single quote)

When to Use HTML Entities

Use HTML entities when you need to handle special characters that could interfere with code or when you want to include symbols that a standard keyboard doesn’t support.

Displaying Reserved Characters

When you include characters like < and > inside an HTML document, browsers interpret them as part of the code. Using HTML entities prevents this issue.

<p>The &lt;div&gt; tag is a block-level element.</p>

This renders as:

The <div> tag is a block-level element.

Representing Non-Keyboard Symbols

If you need symbols like arrows, checkmarks, or mathematical characters, HTML entities make it possible.

<p>Check the box &check; if you agree.</p>
<p>Use the formula: x &plusmn; y.</p>

This displays:

Check the box ✓ if you agree.

Use the formula: x ± y.

Handling Invisible Characters

HTML entities also help you add non-breaking spaces, line breaks, and hidden characters that control spacing in text.

<p>This&nbsp;sentence&nbsp;has&nbsp;non-breaking&nbsp;spaces.</p>

This ensures that the spaces remain intact, even when the text wraps.

Examples of HTML Entities

Using Character Entities in HTML

If you need to replace special symbols in your HTML, character entities help avoid conflicts.

<p>&lt;script&gt; tags run JavaScript.</p>
<p>&copy; 2025 All rights reserved.</p>

This prevents scripts from executing and displays the copyright symbol properly.

Adding a Checkmark with an HTML Entity

If you want to display a checkmark, use:

<p>Completed: &check;</p>

This renders as:

Completed: ✓

Using an HTML Entity for a Middle Dot

To separate items with a middle dot, use:

<p>Item 1 &middot; Item 2 &middot; Item 3</p>

This appears as:

Item 1 · Item 2 · Item 3

Displaying an Arrow in HTML

Use arrows to indicate navigation.

<p>Next page &rarr;</p>

This shows:

Next page →

Encoding and Decoding HTML Entities

When handling user-generated content, encoding special characters into entities prevents security vulnerabilities like cross-site scripting (XSS).

<p>&lt;script&gt;alert('XSS')&lt;/script&gt;</p>

This prevents browsers from running malicious JavaScript code.

To decode HTML entities in JavaScript:

function decodeEntities(encodedString) {
    let textarea = document.createElement("textarea");
    textarea.innerHTML = encodedString;
    return textarea.value;
}
console.log(decodeEntities("<h1>Hello</h1>"));

This outputs:

<h1>Hello</h1>

Learn More About HTML Entities

HTML Entities List

You can use HTML entities to display various symbols, letters, and punctuation marks. Here are some useful examples:

• € → €
• ¥ → ¥
• © → ©
• ™ → ™

Using an HTML Entity for a Hidden Character

If you need to prevent unintended word breaks, use a zero-width space (​).

<p>Word&#8203;Break</p>

This keeps "WordBreak" intact unless the layout forces a break.

Character Entity Reference in HTML

A character entity reference lets you use a name instead of a numeric code.

<p>Registered Trademark: &reg;</p>

This displays:

Registered Trademark: ®

Using an HTML Entity for a Greater-Than Symbol

To display a mathematical greater-than-or-equal symbol, use:

<p>x &ge; 5</p>

This appears as:

x ≥ 5

Frequently Asked Questions About HTML Entities

What’s the Difference Between Named and Numeric Entities?

Named entities use human-readable words (&), while numeric entities use codes (&). Both render the same symbol.

Can You Use HTML Entities in JavaScript?

Yes, but you need to include them inside strings or the innerHTML property.

How Do You Remove HTML Entities from a String?

If you want to replace entities with actual characters in JavaScript, use:

let text = "Hello & welcome!";
let decodedText = text.replace(/&/g, "&");
console.log(decodedText); // Outputs: Hello & welcome!

HTML entities let you display special characters, symbols, and invisible spaces while preventing conflicts in your code. They help with accessibility, formatting, and security when handling user-generated content.