HTML Special Characters
Special characters are symbols that HTML uses for its own structure — like angle brackets for tags. When you want to show these symbols as visible text on a web page, you cannot just type them directly. HTML would read them as code instructions. This topic explains how to display any special character safely and correctly.
Why Some Characters Need Special Treatment
HTML uses the less-than sign < and the greater-than sign > to open and close tags. If you type these directly inside your content, the browser tries to read them as HTML tags and your page breaks or shows nothing.
Visual Diagram — The Problem
You type this in your HTML file:
<p>The price is 5 < 10 and 20 > 15</p>
Browser reads this as:
<p>The price is 5 ← browser sees a new tag starting
← it gets confused and breaks the layout
What you should type instead:
<p>The price is 5 < 10 and 20 > 15</p>
Browser shows correctly:
The price is 5 < 10 and 20 > 15
HTML Entities for Special Characters
HTML entities are special codes that represent a character. Every entity starts with an ampersand & and ends with a semicolon ;. Between them you write either a name or a number.
Named Entities
Named entities use a readable word. They are easier to remember.
< → < (less-than sign) > → > (greater-than sign) & → & (ampersand) " → " (double quotation mark) ' → ' (apostrophe) → (non-breaking space) © → © (copyright symbol) ® → ® (registered trademark) ™ → ™ (trademark) € → € (euro sign) £ → £ (pound sign) ¥ → ¥ (yen sign) ¢ → ¢ (cent sign) ° → ° (degree sign) ±→ ± (plus-or-minus sign) × → × (multiplication sign) ÷→ ÷ (division sign) ½→ ½ (one-half fraction) ¼→ ¼ (one-quarter fraction) — → — (em dash) – → – (en dash) « → « (left angle quotation) » → » (right angle quotation) ♥→ ♥ (heart symbol) ♠→ ♠ (spade symbol) ♣ → ♣ (club symbol) ♦ → ♦ (diamond symbol)
Numeric Entities
Every character also has a numeric code. Numeric entities work even when a browser does not support the named version. You can use decimal or hexadecimal numbers.
Decimal format: < → < Hexadecimal format: < → <
The decimal code is the more readable option. Hexadecimal codes appear often in Unicode references online.
The Most Important Special Characters
The Ampersand — &
The ampersand starts every HTML entity. So when you want to display a literal ampersand on your page, you must write &. This is the single most common special character mistake beginners make.
Wrong: <p>Coffee & Tea</p> Correct: <p>Coffee & Tea</p> Both may display correctly in modern browsers, but the correct version passes HTML validation.
Angle Brackets — < and >
Use these when you teach HTML on a web page, write mathematical comparisons, or show code examples to users. Always replace them with < and > inside your visible content.
Quotation Marks — " and '
Inside HTML attribute values surrounded by double quotes, you need " if you want to show a double quote character. Inside attribute values surrounded by single quotes, use '.
<p title="She said "Hello"">Hover over me</p>
Currency and Math Symbols
Many websites display prices, scientific data, or mathematical expressions. HTML entities cover all common symbols in these areas.
Visual Diagram — Currency Symbols in a Price Table
HTML code: <p>Price: £20 / €25 / ¥3000</p> What appears on screen: Price: £20 / €25 / ¥3000
Math Symbols
45°C → 45°C (temperature) 3 × 4 → 3 × 4 (multiplication) 10 ÷ 2 → 10 ÷ 2 (division) 5 ± 1 → 5 ± 1 (tolerance range) π → π (pi) ∞ → ∞ (infinity)
Arrow and Typographic Symbols
Navigation, menus, and decorative text often need arrow symbols or proper dashes. Use entities so the symbols display consistently across all browsers and operating systems.
← → ← (left arrow) → → → (right arrow) ↑ → ↑ (up arrow) ↓ → ↓ (down arrow) ↔ → ↔ (left-right arrow) — → — (long dash, used in sentences) – → – (medium dash, used in ranges: pages 10–20) … → … (ellipsis, three dots)
Unicode Characters
HTML supports the full Unicode standard. Unicode covers every symbol from every language and writing system in the world. You reference a Unicode character with its decimal or hex code point.
How to Find a Unicode Code Point
Search for the character name on a Unicode chart website. You will find a code like U+2665. To use it in HTML, write ♥ for the hexadecimal version or ♥ for the decimal version. Both show ♥.
Setting the Character Encoding
For Unicode characters to display correctly, your HTML file must declare UTF-8 encoding in the head section:
<meta charset="UTF-8">
Place this tag as the first child of <head>. Without it, some characters may show as boxes or question marks on older browsers.
When to Use Direct Characters vs Entities
When your file is saved with UTF-8 encoding and your server sends the correct content-type header, you can paste many special characters directly — like ©, €, or ™ — without using entities. However, using entities for the five reserved HTML characters is always required regardless of encoding.
Always Use Entities For These Five
< must be < > must be > & must be & " must be " (inside attribute values only) ' must be ' (inside attribute values only)
For all other symbols, using entities is optional but recommended because it keeps your code readable in any text editor and avoids encoding-related display issues.
Practical Example — Displaying Code on a Web Page
Developers often write articles that show HTML code examples. Every angle bracket in the example must be converted to an entity or the browser will try to execute the code instead of displaying it.
Goal: show this text on screen exactly <h1>Hello World</h1> HTML code you write: <p><h1>Hello World</h1></p> What the browser displays: <h1>Hello World</h1>
This technique is how every HTML tutorial website — including this one — shows tag examples without the browser accidentally running them.