? HTML Special Characters

⚡ Quick Overview

In HTML, some characters have special meanings and cannot be written directly without confusing the browser. For example, < and > are used for tags, and & starts an entity. To display these as normal text, we use HTML character entities such as < or &. These tell the browser to show the character instead of treating it as HTML code.

Entities are also helpful for symbols that are not on the keyboard (©, ™, €) or for controlling spacing (like non-breaking spaces). Knowing a few common entities makes your HTML examples safe and readable.

? Key Concepts

Special characters: Characters that HTML uses for its own syntax (like <, >, &).
Entities: Text codes that represent characters, starting with & and ending with ;.
Named entities: Human-friendly names such as < or ©.
Numeric entities: Use Unicode code points like © (©).
Attributes safety: Entities prevent HTML from breaking when you need quotes or symbols inside attributes.
Non-breaking space:   keeps text together on one line.

? Common Special Characters and Their Codes

Less than: < → <
Greater than: > → >
Ampersand: & → &
Quotation marks: " → "
Apostrophe: ' → '
Non-breaking space:  
Copyright: © → ©
Registered: ® → ®
Trademark: ™ → ™
Euro symbol: € → €
Em dash: — → —

? Code Example: Entities in Text & Attributes

? View Code Example

<!-- Display less-than / greater-than symbols inside text -->
<p>If x &lt; 10 and x &gt; 5, then...</p>

<!-- Show common symbols -->
<p>&copy; 2025 MySite &mdash; All rights reserved.</p>
<p>Trademark: &trade; &nbsp; Registered: &reg;</p>

<!-- Use entities safely inside attribute values -->
<img alt="2 &lt; 3 is true" src="icon.png">

<!-- Quotes inside attributes -->
<button title="She said &quot;Hello!&quot;">Hover me</button>

? Live Output / Explanation

?️ Rendered Result

If x < 10 and x > 5, then...

Trademark: ™ Registered: ®

She said, "Hello!"

Notice how the code safely shows symbols and quotes without breaking the HTML structure. The browser receives entities in the source, but you only see the final characters.

? Tips & Best Practices

When writing text that includes <, >, or &, use <, >, and & in the source.
Inside attributes, escape quotes with " or wrap the attribute with the opposite quote type.
Always include <meta charset="UTF-8"> so Unicode characters (€, ✓) render correctly.
Escape & in query strings when writing raw HTML (for example, ?q=cats&lang=en in the source).
Avoid “double escaping” like &lt; unless you really want to show the entity code itself.
Use straight quotes in code examples and avoid “smart quotes” that may not be parsed correctly.

? Try It Yourself

Write a paragraph that literally shows <div class="box"> using the correct entities so it doesn’t become a real element.
Create a link with a query string (e.g., ?q=cats&lang=en) and ensure the & is written as & in the HTML source.
Add a button whose title attribute contains quotes using " (for example: title="She said "Hi!"").
Replace any visual spacing made with multiple spaces by proper CSS margin/padding, and keep   only where a non-breaking space is required (e.g., between a number and its unit).

? Summary

HTML special characters like <, >, and & must be escaped using entities.
Entities keep your examples safe in both text and attribute values.
Use   for non-breaking spaces, but rely on CSS for general layout and spacing.
Correct escaping prevents broken HTML, unexpected rendering, and confusing bugs in your pages.