HTML Symbols

Learn how to display special symbols and characters in HTML

🔣 What are HTML Symbols?

HTML symbols are special characters that cannot be typed directly on a keyboard. They are displayed using entity names or numbers.


<!-- Using entity names -->
<p>Copyright &copy; 2024</p>
<p>Price: &dollar;99</p>

Output:

Price: $99

Common HTML Symbols

Copyright & Legal

Display copyright and legal symbols

&copy; © (Copyright)
&reg; ® (Registered)
&trade; ™ (Trademark)
&sect; § (Section)

€

Currency Symbols

Display various currency symbols

&euro; € (Euro)
&pound; £ (Pound)
&yen; ¥ (Yen)
&cent; ¢ (Cent)
&#8377; ₹ (Rupee)

Mathematical Symbols

Display math and scientific symbols

&plusmn; ± (Plus-minus)
&times; × (Multiply)
&divide; ÷ (Divide)
&ne; ≠ (Not equal)
&le; ≤ (Less equal)
&ge; ≥ (Greater equal)

→

Arrow Symbols

Directional and navigation arrows

&larr; ← (Left arrow)
&rarr; → (Right arrow)
&uarr; ↑ (Up arrow)
&darr; ↓ (Down arrow)
&harr; ↔ (Left-right)
&#8629; ↵ (Return)

♠

Card & Game Symbols

Playing card and gaming symbols

&spades; ♠ (Spades)
&clubs; ♣ (Clubs)
&hearts; ♥ (Hearts)
&diams; ♦ (Diamonds)
&#9733; ★ (Star)
&#9734; ☆ (Empty star)

♪

Music & Special

Musical notes and special characters

&#9834; ♪ (Musical note)
&#9835; ♫ (Beamed notes)
&#9836; ♬ (Beamed 16th)
&#9829; ♥ (Heart)
&#9728; ☀ (Sun)
&#9730; ☂ (Umbrella)

Greek Letters

Greek alphabet for scientific use

&alpha; α (Alpha)
&beta; β (Beta)
&gamma; γ (Gamma)
&delta; δ (Delta)
&pi; π (Pi)
&omega; ω (Omega)

🎨

Color Codes

HTML color representation methods

<!-- Hex colors -->
<span style="color: #FF0000">Red</span>
<span style="color: #00FF00">Green</span>
<span style="color: #0000FF">Blue</span>

<!-- RGB colors -->
<span style="color: rgb(255,0,0)">Red</span>
<span style="color: rgb(0,255,0)">Green</span>

<!-- Named colors -->
<span style="color: crimson">Crimson</span>
<span style="color: teal">Teal</span>

🔹 HTML Color Codes Reference

Complete guide to using colors in HTML:

<!-- Primary Colors -->
<div style="background: #FF0000; color: white; padding: 10px;">Red #FF0000</div>
<div style="background: #00FF00; color: black; padding: 10px;">Green #00FF00</div>
<div style="background: #0000FF; color: white; padding: 10px;">Blue #0000FF</div>

<!-- Popular Web Colors -->
<div style="background: #FF6B6B; color: white; padding: 5px;">Coral #FF6B6B</div>
<div style="background: #4ECDC4; color: white; padding: 5px;">Turquoise #4ECDC4</div>
<div style="background: #45B7D1; color: white; padding: 5px;">Sky Blue #45B7D1</div>
<div style="background: #96CEB4; color: black; padding: 5px;">Mint #96CEB4</div>
<div style="background: #FFEAA7; color: black; padding: 5px;">Peach #FFEAA7</div>

<!-- Gradient Examples -->
<div style="background: linear-gradient(45deg, #FF6B6B, #4ECDC4); color: white; padding: 10px;">
  Gradient Background
</div>

Color Examples:

Red #FF0000

Green #00FF00

Blue #0000FF

Coral #FF6B6B

Turquoise #4ECDC4

Sky Blue #45B7D1