</>
Skip to content
HTML lessons (31/60)

HTML — Symbols

What are Symbols in HTML?

Symbols are little pictures or characters that help explain or decorate your content.
They can be letters, numbers, math signs, logos, or any glyph that exists in the Unicode set.
HTML gives you a few ways to bring those glyphs into your page.

Why use Symbols?

  • They make lists clearer: ✔️, ✖️, ➕.
  • They show status: 🔒 locked, 🔓 unlocked.
  • They add visual interest without images.
  • They keep your file size small because the symbol is part of the text.

Where Symbols Come From

SourceHow to UseExampleBrowser Result
Named Entity&copy;&copy; 2024© 2024
Numeric Reference&#169;&#169; 2024© 2024
Unicode Code Point&#x00A9;&#x00A9; 2024© 2024
CSS content.logo::before{content:'\\2605';}❖★
Direct Unicode©© 2024© 2024

Good to know:
HTML entities are just shortcuts. The browser turns them into the real character before rendering.

Using Named Entities

Named entities are human‑readable shortcuts that start with an ampersand (&) and end with a semicolon (;).

<p>&copy; 2024 My Site</p>
<p>&reg; All rights reserved</p>
<p>&trade; Brand name</p>

What the browser displays

© 2024 My Site
® All rights reserved
™ Brand name

Using Numeric References

Numeric references use the character’s code point. You can write them in decimal (&#169;) or hexadecimal (&#x00A9;).

<p>Use the Greek letter &pi; for pi.</p>
<p>Infinity: &#8734;</p>
<p>Degree symbol: &#176;</p>

What the browser displays

Use the Greek letter π for pi.
Infinity: ∞
Degree symbol: °

Mixing Text and Symbols

You can combine plain text with symbols in the same element.

<ul>
  <li>&#10003; Task completed</li>
  <li>&#10007; Task pending</li>
  <li>&#10148; Task in progress</li>
</ul>

What the browser displays

  • ✔ Task completed
  • ✗ Task pending
  • ➤ Task in progress

Styling Symbols with CSS

Because a symbol is just a character, you can style it like any other text.

<style>
  .important::before {
    content: '\2714'; /* heavy check mark */
    color: green;
    margin-right: 0.3em;
  }
  .warning::before {
    content: '\26A0'; /* warning sign */
    color: orange;
    margin-right: 0.3em;
  }
</style>

<p class="important">All set!</p>
<p class="warning">Check the input.</p>

What the browser displays

✔ All set!
⚠ Check the input.

Symbols in Links and Buttons

Symbols can be part of interactive elements.

<a href="mailto:info@example.com" title="Send email">✉️ Email us</a>

<button type="button">🔍 Search</button>
<input type="submit" value="🗑️ Delete">

What the browser displays

✉️ Email us
🔍 Search
🗑️ Delete

Common Mistakes with Symbols

Common mistake:
Forgetting to set the page encoding to UTF‑8.
If the file isn’t encoded as UTF‑8, symbols may appear as � or ?.

Common mistake:
Using a named entity that isn’t defined in the HTML spec (e.g., &unknown;).
The browser will show the literal text &unknown;.

Common mistake:
Mixing quotes inside a content string without escaping.
Example: .icon::before{content:"\2605;"}; will break.

Common mistakes checklist

  • Did you add <meta charset="utf-8"> in the <head>?
  • Are all named entities terminated with a semicolon?
  • Are numeric references in the correct format (&#nnnn; or &#xhhhh;)?
  • Is the font you use capable of displaying the symbol?
  • Have you escaped quotes inside CSS content values?

Mini Practice

  1. Create a paragraph that shows the copyright symbol, the registered trademark, and the trademark symbol all on the same line.
  2. Build an unordered list of three steps: “Start”, “Continue”, “Finish” and add a green check mark before each item using a CSS pseudo‑element.
  3. Insert a link that opens Gmail (mailto:) and precede the text with the envelope symbol using a named entity.
  4. Add a button that says “Delete” and shows a trash can symbol before the word.
  5. Write a short sentence that uses the infinity symbol and the degree symbol side by side.

Related Topics

EntitiesEmojisCharsetURL Encode

Frequently Asked Questions about Symbols

What is Symbols in HTML?

Symbols is a fundamental concept in HTML. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn Symbols?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn Symbols.

Why is Symbols important in HTML?

Symbols is essential for HTML development. Understanding this concept will help you write better code and solve real-world problems more effectively.