HTML Symbols and Emojis Explained

Previous Next

In the previous lesson you learned how to write reserved symbols like < and &. Now we move to a wider world - thousands of ready-made symbols in HTML: math symbols, Greek letters, special punctuation, and even emojis. All of them can be written directly in your code.

Two Ways to Write Any Symbol

Every symbol in HTML can be written in two ways:

Named entity: like © or ∑ - easy to read but not every symbol has a name.
Numeric entity: like © or ∑ - works for every symbol because it is a Unicode number.

<!-- Both methods produce the same result: (c) -->
<p>All rights reserved &copy; 2025</p>     <!-- Named entity -->
<p>All rights reserved &#169; 2025</p>    <!-- Numeric entity -->

Common Math Symbols

These symbols are not on a regular keyboard, but they are common in educational and scientific sites:

Symbol	Named Code	Numeric Code	Use
Sum	`∑`	`∑`	Sum
Infinity	`∞`	`∞`	Infinity
Sqrt	`√`	`√`	Square root
Not equal	`≠`	`≠`	Not equal
Less or equal	`≤`	`≤`	Less than or equal
Greater or equal	`≥`	`≥`	Greater than or equal
Pi	`π`	`π`	Pi

Greek Letters

Commonly used in equations and scientific notation (physics, math, chemistry):

Symbol	Code	Name
Alpha	`α`	Alpha - first experimental release
Beta	`β`	Beta - second experimental release
Gamma	`γ`	Gamma
Delta	`Δ`	Delta (uppercase) - change in math
Theta	`θ`	Theta - angle in geometry
Lambda	`λ`	Lambda - wavelength in physics
Mu	`μ`	Mu - micro (one millionth)
Sigma	`σ`	Sigma - standard deviation in statistics
Omega	`Ω`	Omega (uppercase) - ohm in electricity

Case sensitivity note: Greek letters are case-sensitive. Δ gives Delta, while δ gives delta. Pay attention to the case.

Emojis in HTML

Emojis are not images. They are Unicode characters just like letters. You can write them in HTML in three ways:

<!-- Method 1: paste the emoji directly (works with UTF-8) -->
<p>Welcome to DevArabi Rocket</p>

<!-- Method 2: decimal numeric code -->
<p>Welcome to DevArabi &#128640;</p>

<!-- Method 3: hex code -->
<p>Welcome to DevArabi &#x1F680;</p>

All three methods produce the same result.

Here are some common emojis with their codes:

Emoji	Numeric Code	Description
Emoji	`😀`	Smiling face
Heart	`❤`	Red heart
Star	`⭐`	Star
Rocket	`🚀`	Rocket
Check	`✅`	Green check mark
Warning	`⚠`	Warning

Important requirement: For emojis and symbols to display correctly in all browsers, your page must include in the <head>:
<meta charset="UTF-8">
Without it, you may see strange symbols or empty squares instead of emojis.

Practical Example - A Page Using Symbols

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Course Features</title>
</head>
<body>

    <h1>Why learn with us? Rocket</h1>

    <ul>
        <li>Check Simple explanation from scratch</li>
        <li>Check Real practical examples</li>
        <li>Check 100% free &amp; no signup</li>
        <li>Star Over 10,000 happy students</li>
    </ul>

    <p>Completion rate: &gt; 95% of students finish the course</p>

    <footer>
        <p>All rights reserved &copy; 2025 DevArabi</p>
    </footer>

</body>
</html>

Frequently Asked Questions - FAQ

Can I copy an emoji from my phone and paste it directly into code?

Yes. As long as your page uses charset="UTF-8", you can paste any emoji directly into HTML. This is the easiest and clearest method when reading code.

Where do I find the Unicode number for any emoji?

Search on emojipedia.org - any emoji shows its exact code. You can also search Google for the emoji name plus "unicode codepoint".

Should I use named or numeric codes?

Use named entities when they exist - they are clearer and easier to read. Use numeric codes for symbols that do not have names (like emojis and rare symbols).

Great! You are now able to add any symbol in the world to your page. In the next lesson, we will finish the course with character encoding (Charsets) - essential meta tags for every professional HTML page.