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.
Reference Table
| Char | Code | Description | Char | Code | Description | Char | Code | Description |
|---|---|---|---|---|---|---|---|---|
|
|
Non-breaking space | < |
< |
Less than | > |
> |
Greater than |
& |
& |
Ampersand | " |
" |
Double quote | ' |
' |
Single quote |
© |
© |
Copyright | ® |
® |
Registered trademark | ™ |
™ |
Trademark |
¥ |
¥ |
Yen/Yuan | € |
€ |
Euro | £ |
£ |
Pound |
× |
× |
Multiplication | ÷ |
÷ |
Division | ± |
± |
Plus-minus |
≤ |
≤ |
Less than or equal | ≥ |
≥ |
Greater than or equal | ≠ |
≠ |
Not equal |
≈ |
≈ |
Approximately | ∞ |
∞ |
Infinity | ∑ |
∑ |
Summation |
ƒ |
ƒ |
Function | ¹ |
¹ |
Superscript 1 | ² |
² |
Superscript 2 (squared) |
³ |
³ |
Superscript 3 (cubed) | ½ |
½ |
One half | ¼ |
¼ |
One quarter |
← |
← |
Left arrow | → |
→ |
Right arrow | ↑ |
↑ |
Up arrow |
↓ |
↓ |
Down arrow | … |
… |
Ellipsis | — |
— |
Em dash |
· |
· |
Middle dot | |
  |
En space | |
  |
Em space |
Example
<p>In HTML, use < for less than, and > for greater than.</p>
<p>& is the "and" symbol itself.</p>
<p>Result: use < for less than, > for greater than. & is the "and" symbol itself.</p>
Common Entity Reference Table
Here are the most commonly used character entities in HTML — worth memorizing:
Example
<!-- Common HTML Entities -->
<p>Non-breaking space: </p>
<p>Less than: <</p>
<p>Greater than: ></p>
<p>Ampersand: &</p>
<p>Double quotation mark: "</p>
<p>Single quotation mark: '</p>
<p>Copyright symbol: ©</p>
<p>Registered trademark: ®</p>
<p>Trademark symbol: ™</p>
<p>Euro symbol: €</p>
<p>Yuan/Yen symbol: ¥</p>
<p>Pound symbol: £</p>
& will auto-suggest choices. But in raw HTML code, always remember to use entities for angle brackets.
& itself needs escaping. If you want to display the text © (rather than the copyright symbol), you cannot write © directly, because the browser will render it as the © symbol. The correct way is &copy;, which tells the browser to escape & as the & symbol.
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):
Example
<p>Named entity: © 2026 Web-Tutorial</p>
<p>Decimal reference: © 2026 Web-Tutorial</p>
<p>Hexadecimal reference: © 2026 Web-Tutorial</p>
<p>All three produce the exact same result: they all display the © symbol.</p>
Special Whitespace Characters
HTML collapses multiple consecutive spaces into a single space by default. If you need to preserve specific spacing, use these approaches:
Example
<p>Normal: Multiple spaces are collapsed.</p>
<p>Entity spaces: Multiple spaces are preserved.</p>
<p>Note: is also used to prevent line-break hyphenation, e.g., "100 km/h" won't break across lines.</p>
Usage Scenarios Summary
- Code Display: When showing tags like
<div>in code examples, you must use<and> - Special Symbols: Copyright
©, registered trademark®, currency symbols - 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
❓ FAQ
< and > need to be escaped?< and > are syntax characters for HTML tags. If you write <div> directly, the browser thinks it's a tag, not text to display. Using < (less than) and > (greater than) tells the browser you want to display the actual angle brackets. Common scenarios: displaying code, math formulas, technical documentation. and a regular space? (non-breaking space) has two functions: 1) It doesn't collapse — multiple show as multiple spaces; 2) It prevents line breaks at that point. Common uses: between numbers and units (like 100 px), between names (like John Doe).<, >, &, , ©) work in all browsers with no issues. However, some obscure entities (like emoji, special math symbols) may display as squares in older browsers. Recommendations: 1) Use common entities freely; 2) Test special symbols before going live; 3) Use CSS or images as alternatives for incompatible symbols.<) are more readable and memorable — use them first. Numeric codes (like < or <) cover a wider range, including characters without named entities. Rule of thumb: use named entities when available (like ©); use numeric codes when there's no named version (like € for the Euro symbol €). Numeric codes come in decimal (&#number;) and hexadecimal (&#xnumber;).📖 Summary
- Entities start with
&and end with; - Common entities:
<,>,&,,© - 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 andto 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.



