In HTML, some characters have special meanings.
For example, < and > are used to define tags so if you type them directly, the browser confuses them as HTML code.
To fix this, HTML provides a way to display such characters correctly called HTML Entities.
They start with & and end with ;
Example:
<div>Hello</div>This will display:
<div>Hello</div>Why Use HTML Entities?
| Reason | Explanation |
|---|---|
| Prevent Errors | Reserved characters (like < or >) won’t break your HTML code |
| Universal Display | Ensure special symbols (€, ©, ₹) appear correctly across all browsers |
| Accessibility | Helps screen readers interpret content properly |
| Readability | Keeps HTML clean and structured |
| Professionalism | Used in clean, validated, W3C-compliant code |
Basic HTML Entity Structure
Each HTML entity has three parts:
&entity_name;
OR
&#entity_number;Example:
<p>2 < 5 and 5 > 2</p>Commonly Used HTML Entities
| Character | Entity Name | Entity Number | Description |
|---|---|---|---|
& | & | & | Ampersand |
< | < | < | Less-than sign |
> | > | > | Greater-than sign |
" | " | " | Double quotation mark |
' | ' | ' | Single quotation mark |
© | © | © | Copyright symbol |
® | ® | ® | Registered trademark |
₹ | ₹ | — | Indian Rupee symbol |
€ | € | € | Euro symbol |
|   | Non-breaking space |
Example of Displaying Reserved Symbols
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML entities and how to display special characters like <, >, ©, and ₹ correctly.">
<meta name="keywords" content="HTML entities, HTML special characters, less than greater than, HTML symbols, HTML encoding">
<meta name="author" content="Dharmesh Kundariya">
<title>HTML Entities Tutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>HTML Entities Tutorial</h1>
<p>Display reserved and special characters in HTML without breaking code.</p>
</header>
<main>
<section>
<h2>Reserved Characters Example</h2>
<p>HTML code:</p>
<pre><code><h2>This is a heading</h2></code></pre>
<p>Output:</p>
<p><h2>This is a heading</h2></p>
</section>
<section>
<h2>Special Symbols</h2>
<p>© 2025 WebTutorials | All Rights Reserved</p>
<p>Price: ₹ 999</p>
<p>Trademark: ® WebTutorials Brand</p>
</section>
</main>
<footer>
<p>© 2025 Dharmesh Kundariya. All rights reserved.</p>
</footer>
</body>
</html>Quick Reference Table
| Symbol | Entity | Description |
|---|---|---|
| © | © | Copyright |
| ™ | ™ | Trademark |
| → | → | Right arrow |
| ← | ← | Left arrow |
| ↑ | ↑ | Up arrow |
| ↓ | ↓ | Down arrow |
| ± | ± | Plus–minus sign |
| × | × | Multiplication sign |
| ÷ | ÷ | Division sign |
| ° | ° | Degree symbol |
HTML Entities are a must-know concept for every web developer. They make your pages error-free, accessible, and professional.
Whenever you need to display reserved characters, always use entities, it’s a small change that gives your site a big quality boost.