HTML Entities, Symbols & Charset
Some characters have a special meaning in HTML, so you need a safe way to show them as plain text.
Why Entities Are Needed
The browser reads < as the start of a tag. If you want to write "5 < 10" on a page, or show a tag as text in a lesson, the browser can get confused.
An HTML entity is a short code that shows a character safely. It starts with & and ends with ;.
Example
&entity_name;
&#number;For example, < shows <, and < shows the same character using its number.
Reserved Characters
| Character | Entity name | Number | Meaning |
|---|---|---|---|
< | < | < | less than |
> | > | > | greater than |
& | & | & | ampersand |
" | " | " | double quote |
' | ' | ' | single quote |
Example
<!DOCTYPE html>
<html>
<body>
<h2>Showing Code as Text</h2>
<p>To make a paragraph, write <p>Hello</p>.</p>
<p>Fish & Chips, Burns Road</p>
<p>Is 5 < 10? Yes.</p>
</body>
</html>Showing Code as Text To make a paragraph, write <p>Hello</p>. Fish & Chips, Burns Road Is 5 < 10? Yes.
You must use < when you want to show a tag as text. You should use & for a lone & too, although browsers are often forgiving about it.
The Non-Breaking Space
HTML squeezes many spaces into one. The entity is a space that is never removed and never breaks the line. It keeps two words together, such as a number and its unit.
Example
<p>Price: Rs 2,500</p>
<p>Distance: 12 km</p>Here "Rs" and "2,500" always stay on the same line.
Do not use many to push text to the right. Use CSS margin or padding for spacing.
Useful Symbols
| Symbol | Entity | Symbol | Entity |
|---|---|---|---|
| © | © | ™ | ™ |
| ® | ® | € | € |
| £ | £ | ° | ° |
| × | × | ÷ | ÷ |
| → | → | ← | ← |
| ✓ | ✓ | ♥ | ♥ |
| – | – | — | — |
Example
<!DOCTYPE html>
<html>
<body>
<p>© 2026 Workownix. All rights reserved.</p>
<p>Karachi today: 34°C</p>
<p>3 × 4 = 12</p>
<p>Next lesson →</p>
<p>✓ Homework done</p>
</body>
</html>© 2026 Workownix. All rights reserved. Karachi today: 34°C 3 × 4 = 12 Next lesson → ✓ Homework done
Character Sets and UTF-8
Computers store every letter as a number. A character set (charset) is the table that matches numbers to letters.
Modern pages use UTF-8. It covers almost every writing system in the world: English, Urdu, Arabic, Chinese, plus emojis. Set it as the very first thing in the head:
Example
<meta charset="UTF-8">With UTF-8, you can type most symbols directly, without entities:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UTF-8 Example</title>
</head>
<body>
<p>Welcome! خوش آمدید</p>
<p>Price: Rs 1,200 ✓</p>
<p>Great job 🎉</p>
</body>
</html>Save your file as UTF-8 too. Most editors, like VS Code, do this by default.
If your page shows strange characters like "é" or "�", the charset line is missing or the file was saved in a different encoding.
Emojis by Number
Every emoji has a number in Unicode. You can write it as an entity with &#x and the hex number:
Example
<p>😀 smile</p>
<p>💻 laptop</p>Exercise
Exercise
Which code shows the text <br> on the page instead of making a line break?