HTML Tutorial: HTML Symbols
Learn how to use HTML symbols like arrows, currency, math symbols with examples, colorful inputs, and outputs
HTML symbols allow you to display special symbols that are not easily typed on a keyboard. They are useful for math, currency, and navigation.
1️⃣ Arrows
INPUT:
<p>Right arrow → Next</p>
<p>Left arrow ← Previous</p>
<p>Up arrow ↑ Top</p>
<p>Down arrow ↓ Bottom</p>
OUTPUT:
Right arrow → Next
Left arrow ← Previous
Up arrow ↑ Top
Down arrow ↓ Bottom
✔️ → → → ✔️ ← → ← ✔️ ↑ → ↑ ✔️ ↓ → ↓
2️⃣ Currency Symbols
INPUT:
<p>Dollar: $</p>
<p>Euro: €</p>
<p>Pound: £</p>
OUTPUT:
Dollar: $
Euro: €
Pound: £
✔️ $ → $ ✔️ € → € ✔️ £ → £ ✔️ Useful for displaying currency on websites
3️⃣ Mathematical Symbols
INPUT:
<p>Plus: + 1 + 2 = 3</p>
<p>Minus: − 5 - 2 = 3</p>
<p>Multiplication: × 2 × 3 = 6</p>
<p>Division: ÷ 6 ÷ 2 = 3</p>
OUTPUT:
Plus: + 1 + 2 = 3
Minus: − 5 - 2 = 3
Multiplication: × 2 × 3 = 6
Division: ÷ 6 ÷ 2 = 3
✔️ + → + ✔️ − → − ✔️ × → × ✔️ ÷ → ÷
4️⃣ Other Useful Symbols
INPUT:
<p>Trademark: ™</p>
<p>Section: §</p>
<p>Paragraph: ¶</p>
OUTPUT:
Trademark: ™
Section: §
Paragraph: ¶
✔️ ™ → ™ ✔️ § → § ✔️ ¶ → ¶ ✔️ Useful for legal and structured documents
5️⃣ Best Practices for HTML Symbols
- Use named entities for readability (©, €)
- Use numeric codes for less common symbols (★, ✓)
- Test symbols on multiple browsers
- Combine symbols with CSS color for emphasis
- Use symbols consistently in UI and content
🚀 What’s Next?
👉 HTML Emojis
Next lesson will cover:
- Adding emojis using HTML codes
- Using Unicode decimal and hexadecimal codes
- Colorful examples with input and output
HTML symbols make web content more expressive, readable, and visually clear, especially for math, currency, and navigation icons.