HTML Entities
Some characters have a special meaning in HTML and cannot be typed directly into the content. For example, the less-than sign (<) is used to open HTML tags, so typing it directly in text would confuse the browser into thinking a new tag is starting.
To display such characters safely, HTML entities (also called character references) are used. An entity is a code that represents a specific character.
HTML Entity Syntax
There are two ways to write HTML entities:
- Named entity:
&name;— Uses a descriptive name (e.g.,<for <) - Numeric entity:
&#number;— Uses a decimal code (e.g.,<for <)
<p>A less-than sign: <</p>
<p>A greater-than sign: ></p>
<p>An ampersand: &</p>
<p>A copyright symbol: ©</p>Most Common HTML Entities
| Character | Description | Named Entity | Numeric Entity |
|---|---|---|---|
| < | Less-than sign | < | < |
| > | Greater-than sign | > | > |
| & | Ampersand | & | & |
| " | Double quotation mark | " | " |
| ' | Single quotation mark | ' | ' |
| Non-breaking space | |   | |
| © | Copyright symbol | © | © |
| ® | Registered trademark | ® | ® |
| ™ | Trademark symbol | ™ | ™ |
| € | Euro sign | € | € |
| £ | British Pound | £ | £ |
| ¥ | Japanese Yen | ¥ | ¥ |
| × | Multiplication sign | × | × |
| ÷ | Division sign | ÷ | ÷ |
| ± | Plus-minus sign | ± | ± |
| ° | Degree symbol | ° | ° |
| ♥ | Heart symbol | ♥ | ♥ |
| ♠ | Spade symbol | ♠ | ♠ |
Using – Non-Breaking Space
The entity inserts a space that will not collapse like regular spaces and will prevent the browser from wrapping text at that point.
<!-- Adding extra visible space between words -->
<p>Name: John Smith</p>
<p>Phone: +1 234 567 8900</p>
<!-- Keeping two words always together on one line -->
<p>Call us on Monday.</p>Displaying HTML Tags as Text
When teaching HTML or documenting code, there is a need to show HTML tags as plain visible text rather than having the browser interpret them. Entities are used for this purpose.
<!-- To display: Use <h1> for the main heading -->
<p>Use <h1> for the main heading.</p>
<!-- To display: <a href="..."> -->
<p>Links use the <a href="..."> tag.</p>Entities in Practice
<footer>
<p>© 2025 eStudy247. All rights reserved.</p>
</footer>
<p>Water boils at 100°C.</p>
<p>Price: €49.99 or £42.00</p>
<p>5 × 8 = 40</p>
<p>HTML & CSS are the building blocks of the web.</p>Key Points to Remember
- Use HTML entities to display characters that have special meaning in HTML
- The most essential entities are
<,>, and& - All entities start with
&and end with; - Named entities (
©) are more readable than numeric entities (©) - Use
to add non-collapsible spaces or prevent line breaks - Entities are case-sensitive —
©works,©does not