HTML Entities (`<`, `>`, `&`, `©`)

🟢 Beginner

📖 Definition

HTML Entities are special code sequences used to display reserved HTML syntax characters (like < or >) that browsers would otherwise interpret as tag markup, or specific symbols that may not be easily typed on standard computer keyboards (like © or ™).

🌍 Multilingual Summary

English

Entities display reserved syntax characters like < for <, > for >, & for &, and © for ©. Always end entity codes with a semicolon ;.

Hindi

Special reserved characters ko literal text dikhane ke liye entities use hoti hain (jaise < ke liye <, > ke liye >, & ke liye &, © ke liye ©). End mein semicolon ; lagayein.

Marathi

Special characters screen var dakhavnyasathi entities vapartat (< sathi <, > sathi >, © sathi ©). End madhye semicolon ; dene aavashyak aahe.

🤔 Why Do We Use Entities?

Certain characters are reserved in HTML syntax (<, >, &, ", '). If you type <p> inside body text, web browsers treat it as an opening HTML paragraph tag instead of displaying literal <p> text. HTML entities instruct browsers to render literal symbol characters without breaking HTML syntax parsing.

📝 Common HTML Entities Reference

Symbol / Character	Description	Entity Name	Entity Code
`<`	Less-than symbol	`<`	`<`
`>`	Greater-than symbol	`>`	`>`
`&`	Ampersand symbol	`&`	`&`
`"`	Double quote mark	`"`	`"`
`'`	Single quote / Apostrophe	`'`	`'`
`©`	Copyright symbol	`©`	`©`
`™`	Trademark symbol	`™`	`™`
`€`	Euro currency symbol	`€`	`€`
`₹`	Indian Rupee symbol	`₹`	`₹`
	Non-breaking space	` `	` `

🧠 When Are Entities Necessary?

Syntax Safety: Printing literal HTML code snippets inside tutorials (e.g., displaying <h1> on screen).
Trademarks & Copyrights: Formatting footer legal statements with © and ™.
Note on UTF-8: Because modern HTML boilerplate uses <meta charset="UTF-8">, you can type standard Unicode symbols directly. Entities are primarily used for syntax safety (<, >, &).

💻 Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Entities Practice</title>
</head>
<body>

  <h1>HTML Entities Demonstration</h1>

  <p>To create a main heading in HTML, use the &lt;h1&gt; heading &lt;/h1&gt; tags.</p>

  <p>Mathematical expression: 5 &lt; 10 &amp;&amp; 20 &gt; 15</p>

  <p>Company Title: Johnson &amp; Johnson Co.</p>

  <p>Special Pricing: &#8377;1,499 or &euro;18.50</p>

  <hr>

  <footer>
    <p>Copyright &copy; 2026 Coding Notes &trade;. All rights reserved.</p>
  </footer>

</body>
</html>

👀 Output / What You Will See

“To create a main heading in HTML, use the <h1> heading </h1> tags.”
“Mathematical expression: 5 < 10 && 20 > 15”
“Company Title: Johnson & Johnson Co.”
“Special Pricing: ₹1,499 or €18.50”
“Copyright © 2026 Coding Notes ™. All rights reserved.”

🧪 Try It Yourself

Write an HTML sentence displaying:
In HTML, we write <a> for hyperlinks and & for ampersand. using proper HTML entities (<, >, &).

⚠️ Common Mistakes

Using   repeatedly for visual layout gaps: Inserting      to force gaps between text instead of using CSS margin or padding.

🌐 Real-World Usage

Tech documentation sites, code tutorial portals, e-commerce stores, and website footers use HTML entities for code snippets and legal symbol display.

💡 Remember

< = <
> = >
& = &
© = ©
Always end entity codes with a semicolon ;.

← Previous: Colors

HTML Home

Next: Audio →

HTML Entities (&lt;, &gt;, &amp;, &copy;)