HtmlConceptBeginner · 3 min read

What Are HTML Entities and How They Work

HTML entities are special codes that represent reserved or invisible characters in HTML, like & for an ampersand or < for a less-than sign. They let you show characters that browsers normally treat as code, ensuring your text displays correctly.

⚙️

How It Works

Think of HTML entities as secret codes that tell the browser to show a special character instead of reading it as part of the HTML code. For example, the less-than sign < is used in HTML tags, so if you want to show it as text, you can't just type < directly. Instead, you use its HTML entity <.

This is like using a secret handshake to say "show this symbol" without confusing the browser. Each entity starts with an ampersand & and ends with a semicolon ;. Inside, it can be a name like lt or a number like #60, both meaning the same character.

💻

Example

This example shows how to display special characters like <, >, and & using HTML entities.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Entities Example</title>
</head>
<body>
  <p>Less than sign: &lt;</p>
  <p>Greater than sign: &gt;</p>
  <p>Ampersand: &amp;</p>
  <p>Double quote: &quot;</p>
  <p>Non-breaking space: &nbsp; (adds space)</p>
</body>
</html>

Output

Less than sign: < Greater than sign: > Ampersand: & Double quote: " Non-breaking space: (adds space)

🎯

When to Use

Use HTML entities whenever you want to show characters that HTML normally uses for code, like <, >, or &. This prevents the browser from mixing up your text with HTML tags or special instructions.

For example, if you write a tutorial about HTML or show code snippets, you need entities to display the code correctly. Also, use entities for invisible characters like non-breaking spaces to control spacing in your text.

✅

Key Points

HTML entities start with & and end with ;.
They let you display reserved characters like < and & safely.
You can use named entities (like <) or numeric ones (like <).
Entities help keep your HTML code and text separate and clear.

✅

Key Takeaways

HTML entities let you show special characters that HTML normally uses as code.

Use entities to display symbols like <, >, &, and quotes safely in your web pages.

Entities start with & and end with ; and can be named or numeric.

They prevent confusion between text and HTML code in browsers.