Introduction
HTML symbols allow you to display a variety of characters that are not easily accessible on a standard keyboard. These symbols include mathematical symbols, currency signs, arrows, and many other special characters. Using HTML entities, you can ensure these symbols are rendered correctly by the browser.
Common HTML Symbols
Mathematical Symbols
HTML provides entities for a variety of mathematical symbols.
+(Plus):+or+-(Minus):−or−×(Multiplication):×or×÷(Division):÷or÷=(Equals):=or=≠(Not Equal):≠or≠<(Less Than):<or<>(Greater Than):>or>≤(Less Than or Equal To):≤or≤≥(Greater Than or Equal To):≥or≥
Example
<p>5 + 5 = 10</p>
<p>10 − 5 = 5</p>
<p>5 × 5 = 25</p>
<p>10 ÷ 2 = 5</p>
<p>10 < 20</p>
<p>10 > 5</p>
<p>10 ≤ 10</p>
<p>20 ≥ 10</p>
<p>10 ≠ 5</p>
Currency Symbols
HTML provides entities for various currency symbols.
$(Dollar):$or$€(Euro):€or€£(Pound):£or£¥(Yen):¥or¥¢(Cent):¢or¢
Example
<p>$100</p>
<p>€100</p>
<p>£100</p>
<p>¥100</p>
<p>¢50</p>
Arrows
HTML provides entities for various arrow symbols.
←(Left Arrow):←or←↑(Up Arrow):↑or↑→(Right Arrow):→or→↓(Down Arrow):↓or↓↔(Left-Right Arrow):↔or↔
Example
<p>← Left</p>
<p>↑ Up</p>
<p>→ Right</p>
<p>↓ Down</p>
<p>↔ Left-Right</p>
Greek Letters
HTML provides entities for Greek letters.
Α(Alpha):ΑorΑΒ(Beta):ΒorΒΓ(Gamma):ΓorΓΔ(Delta):ΔorΔα(alpha):αorαβ(beta):βorβγ(gamma):γorγδ(delta):δorδ
Example
<p>Α Β Γ Δ</p>
<p>α β γ δ</p>
Miscellaneous Symbols
HTML provides entities for a variety of other symbols.
©(Copyright):©or©®(Registered):®or®™(Trademark):™or™°(Degree):°or°¶(Paragraph):¶or¶§(Section):§or§•(Bullet):•or•…(Ellipsis):…or…
Example
<p>© 2023 Company Name</p>
<p>Trademark: ™</p>
<p>Temperature: 25°C</p>
<p>New paragraph ¶</p>
<p>Section symbol §</p>
<p>Bull • point</p>
<p>Ellipsis …</p>
Example: Using Multiple HTML Symbols in a Document
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Symbols Example</title>
</head>
<body>
<h1>HTML Symbols Examples</h1>
<section>
<h2>Mathematical Symbols</h2>
<p>5 + 5 = 10</p>
<p>10 − 5 = 5</p>
<p>5 × 5 = 25</p>
<p>10 ÷ 2 = 5</p>
<p>10 < 20</p>
<p>10 > 5</p>
<p>10 ≤ 10</p>
<p>20 ≥ 10</p>
<p>10 ≠ 5</p>
</section>
<section>
<h2>Currency Symbols</h2>
<p>$100</p>
<p>€100</p>
<p>£100</p>
<p>¥100</p>
<p>¢50</p>
</section>
<section>
<h2>Arrows</h2>
<p>← Left</p>
<p>↑ Up</p>
<p>→ Right</p>
<p>↓ Down</p>
<p>↔ Left-Right</p>
</section>
<section>
<h2>Greek Letters</h2>
<p>Α Β Γ Δ</p>
<p>α β γ δ</p>
</section>
<section>
<h2>Miscellaneous Symbols</h2>
<p>© 2023 Company Name</p>
<p>Trademark: ™</p>
<p>Temperature: 25°C</p>
<p>New paragraph ¶</p>
<p>Section symbol §</p>
<p>Bull • point</p>
<p>Ellipsis …</p>
</section>
</body>
</html>
Conclusion
HTML symbols enhance the ability to display a wide range of characters and special symbols on web pages. By using entities like +, €, ←, Α, and ©, you can ensure that these symbols are rendered correctly. Understanding and using HTML symbols effectively is crucial for creating well-structured and readable web content.