HtmlHow-ToBeginner · 3 min read

How to Add Special Characters in HTML: Simple Guide

To add special characters in HTML, use character entities like © or numeric codes like ©. These codes tell the browser to display the special symbol instead of normal text.

📐

Syntax

Special characters in HTML are added using character entities or numeric codes. A character entity starts with an ampersand &, followed by a name or number, and ends with a semicolon ;.

&name; — named entity (e.g., © for ©)
&#number; — decimal numeric code (e.g., © for ©)
&#xhex; — hexadecimal numeric code (e.g., © for ©)

html

&copy; &amp; &lt; &gt; &#169; &#xA9;

Output

💻

Example

This example shows how to add common special characters like copyright, ampersand, less than, and greater than symbols using character entities and numeric codes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Special Characters Example</title>
</head>
<body>
  <p>Copyright symbol: &amp;copy; or &#169;</p>
  <p>Ampersand symbol: &amp;amp;</p>
  <p>Less than symbol: &amp;lt;</p>
  <p>Greater than symbol: &amp;gt;</p>
</body>
</html>

Output

⚠️

Common Pitfalls

One common mistake is typing special characters directly in HTML without using entities, which can break the page or show incorrectly. For example, using < and > directly instead of < and > can confuse the browser because these are part of HTML tags.

Also, forgetting the semicolon ; at the end of the entity code will cause it not to render properly.

html

<!-- Wrong: -->
<p>5 < 10 and 10 > 5</p>

<!-- Right: -->
<p>5 &lt; 10 and 10 &gt; 5</p>

Output

Wrong: 5 < 10 and 10 > 5 (may break HTML) Right: 5 < 10 and 10 > 5 (renders correctly)

📊

Quick Reference

Character	Entity Name	Decimal Code	Hex Code
© (Copyright)	©	©	©
& (Ampersand)	&	&	&
< (Less than)	<	<	<
> (Greater than)	>	>	>
" (Double quote)	"	"	"
' (Single quote)	'	'	'

✅

Key Takeaways

Always end entity codes with a semicolon ; to ensure correct rendering.

Avoid typing special characters directly if they are part of HTML syntax, like < or >.

Named entities are easier to read, but numeric codes work universally.

Use the correct entity to prevent HTML errors and display issues.