HTML Entities

🌐 HTML Entities

HTML Entities are special codes used to display reserved characters, symbols, or invisible spaces in HTML that would otherwise be interpreted as code.

 1. Why HTML Entities Are Needed

Some characters have special meaning in HTML, like:

  • < and > → used for tags

  • & → starts an entity

If you write them directly, the browser may misinterpret them.

❌ Problem

<p>5 < 10</p>

✅ Correct (Using Entity)

<p>5 &lt; 10</p>

 2. HTML Entity Syntax

HTML entities have two formats:

▶️ Named Entity

&entityName;

▶️ Numeric Entity

&#entityNumber;

Both end with a semicolon (;).


 3. Common Entities (Must Know ⭐)

Character Entity Description
< &lt; Less than
> &gt; Greater than
& &amp; Ampersand
" &quot; Double quote
' &apos; Single quote
© &copy; Copyright
® &reg; Registered
&trade; Trademark

 4. Non-Breaking Space (&nbsp;)

Used to create extra spaces that won’t collapse or break lines.

<p>Hello&nbsp;&nbsp;World</p>

✔ Useful for spacing
❌ Don’t overuse for layout (use CSS instead)


 5. Currency Symbols

₹ → &#8377;
$ → &dollar;
€ → &euro;
£ → &pound;

Example:

<p>Price: &#8377;500</p>

 6. Mathematical Symbols

× → &times;
÷ → &divide;
± → &plusmn;
∞ → &infin;

Example:

<p>10 &times; 2 = 20</p>

 7.  Entities for Quotes (Important for Attributes)

<p title="John &quot;The Boss&quot;">Hover me</p>

✔ Prevents attribute break


8. Emojis Using Entities

😀 → &#128512;
❤️ → &#10084;

Example:

<p>Happy Coding &#128512;</p>

 9. Displaying HTML Code as Text

To show HTML code on a webpage:

Output:

<p>Hello World</p>

✔ Very useful for tutorials


❌ Common Mistakes

❌ Forgetting semicolon (;)
❌ Using entities unnecessarily
❌ Using &nbsp; for layout
❌ Writing < or & directly in text


🧠 Key Points to Remember

  • Entities display reserved & special characters

  • Always end entities with ;

  • Use &lt; and &gt; for < >

  • Use &amp; for &

  • Use CSS for spacing, not &nbsp;

You may also like...