What Are HTML Special Characters?
HTML special characters are used to display symbols in a web page that would otherwise be interpreted as part of the HTML syntax.
For example, the < symbol is recognized as the beginning of an HTML tag. If you write < directly in your code intending to show the symbol itself, the browser may misinterpret it as the start of a tag, leading to display errors or broken markup.
To avoid this, HTML provides special character codes, also known as HTML entities, that allow you to display these reserved symbols correctly in the browser. These entities are written using a specific syntax, typically starting with an ampersand (&) and ending with a semicolon (;).
For instance, to display the < symbol as text on the page, you would use the HTML entity <.
Note:
HTML special characters are also referred to as HTML entities, character entities, or HTML escape sequences. These terms all refer to the same concept: codes used to represent special symbols in HTML documents.
Some Characters in HTML Are Reserved or Have Special Meaning
Before we dive into the explanation, let’s look at a quick example.
Suppose you want to display the following text on a web page:
Let's learn about the <p> element!
At first glance, this might seem fine. But here’s how the browser actually renders it:
The < symbol is interpreted as the start of an HTML tag, so the sentence is not displayed as intended. The browser tries to treat the second <p> as a new tag, which causes the markup to break.
Reserved Characters in HTML
Some characters in HTML are reserved, meaning they have a special purpose in the markup and cannot be used as plain text. These are known as HTML reserved characters.
<— Indicates the beginning of an HTML tag>— Indicates the end of an HTML tag&— Begins an HTML entity; used to represent special characters""— Double quote; used to enclose attribute values''— Single quote; also used to enclose attribute values
To ensure these reserved characters display correctly in an HTML document, they must be escaped using special codes called HTML entities (or HTML special characters).
By using these entities in your markup, the browser can render the symbols exactly as intended.
HTML Special Characters Are Used to Represent Reserved Symbols
To correctly display reserved characters like < and > in HTML, you need to use HTML special characters, also known as HTML entities.
Let’s rewrite the example we saw earlier using HTML entities so that the browser renders the symbols properly.
Here is a quick reference table:
| Character to Display | HTML Entity to Use |
|---|---|
< |
< |
> |
> |
Failing to use HTML special characters can cause display errors and reduce text clarity. Using entities helps preserve both readability and compatibility.
HTML Special Characters Table
HTML special characters are primarily used in the following two situations:
- To avoid conflicts with reserved characters in HTML
- To display symbols that cannot be typed directly from the keyboard
HTML Special Characters You Must Use to Avoid Conflicts with Reserved Symbols
| Character to Display | HTML Entity to Use |
|---|---|
< |
< |
> |
> |
& |
& |
" |
" |
' |
' |
Common HTML Special Characters for Symbols Not Found on the Keyboard
While HTML special characters are mainly used to represent reserved symbols in markup, they also include many characters that aren’t available directly on a standard keyboard.
To display these non-keyboard symbols correctly in a web page, HTML entities are required.
Tip:
For characters not available on a standard keyboard, you can either use their HTML entity or simply copy and paste the symbol directly into your HTML.
| Character to Display | HTML Entity to Use |
|---|---|
| & | & |
| © | © |
| ® | ® |
| ¶ | ¶ |
| · | · |
| • | • |
| × | × |
| ÷ | ÷ |
| ¼ | ¼ |
| ½ | ½ |
| ¾ | ¾ |
| Σ | Σ |
| α | α |
| β | β |
| δ | δ |
| Ω | Ω |
| ← | ← |
| → | → |
| ↔ | ↔ |
| ↑ | ↑ |
| ↓ | ↓ |
| « | « |
| » | » |
| ▶ | ▶ |
| ▼ | ▼ |
| ♠ | ♠ |
| ♣ | ♣ |
| ♥ | ♥ |
| ♦ | ♦ |
| 「 | 「 |
| 」 | 」 |
The Special Character for Space:
Among HTML special characters, represents a space—specifically, a non-breaking space. While pressing the spacebar inserts a regular space in text, is a special character used when:
- You want to insert multiple consecutive spaces (HTML collapses regular spaces into one).
- You need a space that won’t break across lines, ensuring the text stays on the same line.
Note:
The table above covers only some of the most common HTML special characters.
For a full list, refer to the official HTML character entity reference.
Want to Add Emojis to Your Web Pages?
Emojis are small graphic icons used to express emotions, ideas, or situations—like 😃 (smiling face), 🎉 (party popper), or ❤️ (heart).
They're often referred to as “emoticons,” though the terms are sometimes used interchangeably.
Learn how to insert emojis into your HTML documents to enhance your content visually and make it more engaging.