HTML Character Entities: Complete Reference Guide

An HTML character entity (also called an HTML entity) is a string of characters that represents a special symbol or reserved character in HTML. Because characters like <, >, and & have functional meaning in HTML markup, you cannot simply type them into your document and expect them to display as text. Instead, you use entity codes such as <, >, and & to render these characters safely in the browser. Understanding HTML entities is essential for any web developer who needs to display code snippets, mathematical symbols, currency signs, or typographic characters on a web page.

What Are HTML Character Entities?

HTML character entities are specially formatted strings that the browser interprets and renders as a single character. Every HTML entity begins with an ampersand (&) and ends with a semicolon (;). Between these delimiters, you place either a recognized name (a named entity) or a numeric code (a numeric entity).

For example, if you want to display a less-than sign on your page, you write < instead of <. The browser reads < and renders the < symbol without treating it as the start of an HTML tag.

HTML entities serve three primary purposes:

1. Displaying reserved characters - Characters like <, >, &, and " are part of HTML syntax. Entities let you show them as visible text.
2. Inserting characters not on your keyboard - Symbols like copyright (©), arrows (→), and mathematical operators (±) can be inserted using entity codes.
3. Controlling whitespace - The non-breaking space ( ) prevents the browser from collapsing multiple spaces into one and stops line breaks at specific points.

Why You Need Character Entities

When a browser parses your HTML document, it treats certain characters as instructions rather than content. If you write <p>3 < 5</p>, the browser may interpret the < after 3 as the beginning of a new tag, potentially breaking your layout or hiding content.

Character entities solve this by providing an unambiguous way to represent these characters. Here are the key scenarios where you need entities:

• Displaying HTML or code snippets - When showing markup examples on a tutorial page, every < and > must be encoded as < and > so the browser renders them as text.
• Preventing parsing errors - An unescaped & in a URL parameter or text can confuse the HTML parser. Using & eliminates ambiguity.
• Maintaining consistent spacing - HTML collapses consecutive whitespace characters into a single space. Using   (non-breaking space) preserves the intended spacing.
• Accessibility and internationalization - Entities provide a reliable, encoding-independent way to include special characters regardless of the document’s character set.

Named vs Numeric Entities

HTML entities come in two forms, and understanding both gives you maximum flexibility.

Named Entities

Named entities use a human-readable keyword between & and ;:

&    → &
&lt;     → <
&gt;     → >
&quot;   → "
&apos;   → '
&copy;   → ©
&nbsp;   → (non-breaking space)

Named entities are easier to remember and read in source code, but only a limited set of characters has named entities defined in the HTML specification.

Numeric Entities

Numeric entities use the character’s Unicode code point. They can be written in decimal or hexadecimal form:

&#60;    → < (decimal)
&#x3C;   → < (hexadecimal)
&#169;   → © (decimal)
&#xA9;   → © (hexadecimal)

Numeric entities can represent any character in the Unicode standard, making them useful for symbols that do not have a named entity.

Which Should You Use?

Use named entities when available because they make your source code more readable. Fall back to numeric entities for characters that lack a named equivalent, or when you need to reference a specific Unicode code point.

Essential HTML Entities Reference Table

Below are the most commonly used HTML entities organized by category.

Reserved Characters

Whitespace and Formatting

Currency Symbols

Mathematical Symbols

Arrows

Miscellaneous Symbols

Common Use Cases

Displaying Code in HTML

When writing tutorials or documentation, you frequently need to show raw HTML code on the page. Without entities, the browser would interpret the tags rather than displaying them:

<!-- This will NOT display as text -->
<p><div class="box">Hello</div></p>

<!-- This WILL display the code as visible text -->
<p>&lt;div class=&quot;box&quot;&gt;Hello&lt;/div&gt;</p>

For larger code blocks, consider wrapping content in <code> and <pre> elements while still encoding reserved characters:

<pre><code>&lt;?php echo 'Hello World'; ?&gt;</code></pre>

Controlling Spacing

HTML collapses multiple spaces into one. Use   to create deliberate spacing:

<p>Score:&nbsp;&nbsp;&nbsp;100</p>

The non-breaking space also prevents line breaks between words that should stay together, such as “100 km” or “Dr. Smith.”

Keyboard Shortcuts in Documentation

When documenting keyboard shortcuts, combine the <kbd> element with entities for a clean presentation:

<p>Save the file by pressing <kbd>Ctrl</kbd>+<kbd>S</kbd></p>
<p>To write a tag, type <kbd>&lt;</kbd> followed by the element name</p>

URLs with Ampersands

When embedding URLs that contain query parameters directly in HTML (outside of href attributes processed by the parser), encode the ampersand:

<a href="page.html?name=foo&amp;id=123">Link</a>

Modern browsers are forgiving, but encoding & as & in attribute values is valid practice and prevents validation warnings.

Inserting Symbols Without Images

Instead of using image files for common symbols, use HTML entities. This reduces HTTP requests and improves page load performance:

<p>Price: &euro;29.99</p>
<p>&copy; 2024 BenzHub. All rights reserved.</p>
<p>Temperature: 72&deg;F</p>
<p>Navigating: Home &rarr; Products &rarr; Details</p>

Using HTML entities instead of images or icon fonts for basic symbols keeps your page lightweight and ensures the characters scale perfectly at any font size.

See the Pen HTML Character Entity - HTML by lenrich (@lenrich) on CodePen.