HTML Entities Explained - Writing Special Symbols in Code
Imagine you are writing a lesson about HTML and you want to say: "The <p> tag creates a paragraph." The problem is that if you write <p> directly in your code, the browser thinks you want to create a paragraph - not display the tag as text.
That is the exact problem solved by HTML Entities. They are special ways to write symbols that conflict with HTML or cannot be typed directly from the keyboard.
Why Are There "Reserved" Symbols in HTML?
The browser reads the page and looks for specific signs to understand the structure:
- The
<sign means: "a tag starts here" - The
>sign means: "a tag ends here" - The
&sign means: "an entity starts here"
So if you want to display them as normal text, you cannot write them directly. The solution is to use a special code that the browser converts into the correct symbol when rendering.
One Rule That Explains Everything
Every HTML entity follows the same structure:
& + symbol_name + ;
Example: < -> displays <
Example: > -> displays >
Example: & -> displays &
Example: © -> displays (c)
An entity always starts with & and always ends with a semicolon ;. The part in between is the symbol name.
Reserved Symbols - The Most Important
These symbols must always be written as entities when you want to display them as text:
| Displayed Symbol | Entity Code | Name | When to Use It |
|---|---|---|---|
| < | < |
Less Than | Show HTML tags as text in explanations |
| > | > |
Greater Than | Show HTML tags as text in explanations |
| & | & |
Ampersand | Write & in text or URLs |
| " | " |
Quotation Mark | Inside double-quoted attribute values |
| ' | ' |
Apostrophe | Inside single-quoted attribute values |
Non-Breaking Space -
The most famous HTML entity is , short for Non-Breaking Space.
Normally, the browser collapses repeated spaces into a single space. It can also break a line at a space if needed. solves both problems:
<!-- The browser shows only one space even if you type many -->
<p>Word Word</p>
<!-- adds real spaces that are not collapsed -->
<p>Word Word</p>
<!-- Prevent line break between two words -->
<p>Mr. Smith will not break</p>
for layout and alignment. That is CSS work. Use only when meaning requires preventing a line break between two words.
Other Common Symbols
| Displayed Symbol | Entity Code | Use Case |
|---|---|---|
| (c) | © |
Copyright - in site footers |
| (R) | ® |
Registered trademark |
| TM | ™ |
Trademark (not registered) |
| EUR | € |
Euro currency symbol |
| GBP | £ |
British pound symbol |
| -> | → |
Right arrow |
| <- | ← |
Left arrow |
| OK | ✓ |
Check mark |
| | |
Non-breaking space |
Practical Example - Writing HTML Code Inside HTML
This is the most common case for entities: explaining HTML inside an HTML page. Here is how to write a sentence explaining the paragraph tag:
<!-- What you write in code -->
<p>The <p> tag creates a text paragraph in HTML.</p>
<!-- What the visitor sees in the browser -->
The <p> tag creates a text paragraph in HTML.
This is exactly what this site does in every lesson - every code sample you see is written with HTML Entities!
Frequently Asked Questions - FAQ
Are entities case-sensitive?
Yes. < works, but < does not. Always write entity names in lowercase.
Can I use a number instead of a name?
Yes. Each symbol has a Unicode number that can be written numerically. For example, < can also be written as <. The name is clearer and easier to read - use it whenever possible.
Do I need to memorize all these symbols?
No. You only need to memorize the five core ones: <, >, &, , ©. You can easily look up the rest when you need them.