HTML Character Entities

In HTML, certain characters (such as <, >, &) are used as part of the tag syntax. If you want to display these characters themselves on the page, you need to use character entities — also called escape characters.

Why Entities Are Needed

When the browser encounters <, it interprets it as the start of a tag. To display it as a "less than" sign on the page, you must write <. Similarly, the & symbol itself needs escaping because it is the prefix for entity references.

HTML

<p>In HTML, use &lt; for less than, and &gt; for greater than.</p>
<p>&amp; is the "and" symbol itself.</p>
<p>Result: use < for less than, > for greater than. & is the "and" symbol itself.</p>

▶ Try It Yourself

Common Entity Reference Table

Here are the most commonly used character entities in HTML — worth memorizing:

HTML

<!-- Common HTML Entities -->
<p>Non-breaking space: &nbsp;</p>
<p>Less than: &lt;</p>
<p>Greater than: &gt;</p>
<p>Ampersand: &amp;</p>
<p>Double quotation mark: &quot;</p>
<p>Single quotation mark: &apos;</p>
<p>Copyright symbol: &copy;</p>
<p>Registered trademark: &reg;</p>
<p>Trademark symbol: &trade;</p>
<p>Euro symbol: &euro;</p>
<p>Yuan/Yen symbol: &yen;</p>
<p>Pound symbol: &pound;</p>

▶ Try It Yourself

💡 Tip: In most code editors, you don't need to manually type entities. For example, in VS Code, typing & will auto-suggest choices. But in raw HTML code, always remember to use entities for angle brackets.

Numeric References and Named Entities

Entity symbols come in two forms: named entities (e.g., ©) and numeric references (e.g., ©). Numeric references can use decimal or hexadecimal (with an x prefix):

HTML

<p>Named entity: &copy; 2026 Web-Tutorial</p>
<p>Decimal reference: &#169; 2026 Web-Tutorial</p>
<p>Hexadecimal reference: &#x00A9; 2026 Web-Tutorial</p>
<p>All three produce the exact same result: they all display the © symbol.</p>

▶ Try It Yourself

Special Whitespace Characters

HTML collapses multiple consecutive spaces into a single space by default. If you need to preserve specific spacing, use these approaches:

HTML

<p>Normal: Multiple   spaces   are collapsed.</p>
<p>Entity spaces: Multiple&nbsp;&nbsp;&nbsp;spaces&nbsp;&nbsp;are preserved.</p>
<p>Note: &nbsp; is also used to prevent line-break hyphenation, e.g., "100&nbsp;km/h" won't break across lines.</p>

▶ Try It Yourself

Usage Scenarios Summary

Code Display: When showing tags like <div> in code examples, you must use < and >
Prevent Line Breaks: Use   to keep phrases like "100 km/h" or "Chapter 1" from breaking across lines
Quote Nesting: When using quotes inside attribute values, inner quotes need escaping

📌 Complete Entity Reference: The full list of all HTML Character Entities can be found in the HTML specification. A few dozen commonly used ones cover 99% of scenarios.

📖 Summary

Entities start with & and end with ;
Entities come in two forms: named entities and numeric references
Consecutive spaces are collapsed by browsers; use   to force preservation

📝 Exercises

Code Display: Create a paragraph that displays the text "Please use <h1> through <h6> to define headings" on the page, where <h1> through <h6> should appear in blue code-style formatting.
Copyright Notice: Write a copyright notice at the bottom of the page using © for the copyright symbol and   to maintain proper spacing.
Entity Combo: Write a line of text using entities that includes a less-than sign, greater-than sign, ampersand, and quotation marks all at once.

← Previous: HTML Media Next: HTML Styles →