Blog / HTML Entities: A Guide to Displaying Special Characters in Web Pages
Oct 20, 2024 · 4 mins read
200 views
When creating a website, you often need to display special characters like symbols, mathematical signs, or even non-breaking spaces. Some characters can cause issues if inserted directly into HTML because they have a specific meaning in HTML code. That's where HTML entities come in handy.
HTML entities allow you to display characters that would otherwise be reserved or hard to type. These entities are defined with an & symbol followed by the entity name or number and end with a ;. In this blog post, we will cover some of the most common HTML entities you’ll likely use in your projects.
Why Do We Use HTML Entities? You may be wondering why not just type the special characters directly into the code? While that's sometimes possible, HTML entities ensure that the character is displayed consistently across different browsers and devices. Additionally, certain characters like and & have special meanings in HTML, and using them directly can break your code.
For example, using the less-than sign directly in your HTML will confuse the browser because it thinks you’re starting a new HTML tag. Instead, you would use the HTML entity < to display it properly.
Now, let’s dive into some common HTML entities and how to use them!
Special Characters that are commonly used in HTML:
Character | HTML Entity | Number Code | Description |
---|---|---|---|
|   | Non-breaking space | |
< | < | < | Less than |
> | > | > | Greater than |
& | & | & | Ampersand |
" | " | " | Double quotation mark |
' | ' | ' | Apostrophe |
¢ | ¢ | ¢ | Cent sign |
£ | £ | £ | Pound sign |
¥ | ¥ | ¥ | Yen sign |
€ | € | € | Euro sign |
© | © | © | Copyright |
® | ® | ® | Registered trademark |
™ | ™ | ™ | Trademark |
§ | § | § | Section sign |
° | ° | ° | Degree sign |
¶ | ¶ | ¶ | Pilcrow (paragraph) sign |
× | × | × | Multiplication sign |
÷ | ÷ | ÷ | Division sign |
Greek Letters are often used in math, science, and other technical fields. Here are some common ones you might need:
Character | HTML Entity | Number Code | Description |
---|---|---|---|
α | α | α | Greek small letter alpha |
β | β | β | Greek small letter beta |
γ | γ | γ | Greek small letter gamma |
δ | δ | δ | Greek small letter delta |
ε | ε | ε | Greek small letter epsilon |
ζ | ζ | ζ | Greek small letter zeta |
η | η | η | Greek small letter eta |
θ | θ | θ | Greek small letter theta |
λ | λ | λ | Greek small letter lambda |
π | π | π | Greek small letter pi |
σ | σ | σ | Greek small letter sigma |
φ | φ | φ | Greek small letter phi |
ω | ω | ω | Greek small letter omega |
Mathematical Symbols is everywhere, and HTML provides entities to display common mathematical symbols. Here are some of the important ones:
Character | HTML Entity | Number Code | Description |
---|---|---|---|
± | ± | ± | Plus-minus sign |
≤ | ≤ | ≤ | Less than or equal to |
≥ | ≥ | ≥ | Greater than or equal to |
≠ | ≠ | ≠ | Not equal |
∞ | ∞ | ∞ | Infinity sign |
∑ | ∑ | ∑ | Summation |
∫ | ∫ | ∫ | Integral sign |
√ | √ | √ | Square root |
Arrows, which can be useful for navigation or mathematical purposes:
Character | HTML Entity | Number Code | Description |
---|---|---|---|
← | ← | ← | Left arrow |
↑ | ↑ | ↑ | Up arrow |
→ | → | → | Right arrow |
↓ | ↓ | ↓ | Down arrow |
↔ | ↔ | ↔ | Left-right arrow |
↵ | ↵ | ↵ | Carriage return arrow |
Currency Symbols to show monetary values from different parts of the world? HTML entities make it easy:
Character | HTML Entity | Number Code | Description |
---|---|---|---|
← | ← | ← | Left arrow |
↑ | ↑ | ↑ | Up arrow |
→ | → | → | Right arrow |
↓ | ↓ | ↓ | Down arrow |
↔ | ↔ | ↔ | Left-right arrow |
↵ | ↵ | ↵ | Carriage return arrow |
Bookmark this guide, and the next time you need to display a special character or symbol, you’ll have the right entity ready to go! Happy coding!