HTML Entities

Some characters have special meaning in HTML (like <, >, and &). To display them literally, use HTML entities. An entity can be written as a named entity (e.g., &amp;) or a numeric reference (e.g., &#38; or &#x26;).

1) Why Entities?


<!-- If you want to show <div> in the browser, you must escape it -->
&lt;div&gt;Hello&lt;/div&gt;

Rendered output: <div>Hello</div>

Common HTML Entities

Character Named Decimal Hex Description
&&amp;&#38;&#x26;Ampersand
<&lt;&#60;&#x3C;Less-than
>&gt;&#62;&#x3E;Greater-than
"&quot;&#34;&#x22;Double quote
'&apos;&#39;&#x27;Single quote / apostrophe
 &nbsp;&#160;&#xA0;Non-breaking space
©&copy;&#169;&#xA9;Copyright
®&reg;&#174;&#xAE;Registered trademark
™&trade;&#8482;&#x2122;Trademark
€&euro;&#8364;&#x20AC;Euro sign
₹&#8377;&#8377;&#x20B9;Indian Rupee (no named entity)
—&mdash;&#8212;&#x2014;Em dash
–&ndash;&#8211;&#x2013;En dash
←&larr;&#8592;&#x2190;Left arrow
→&rarr;&#8594;&#x2192;Right arrow
✓&check;&#10003;&#x2713;Check mark

2) Non-breaking Space (&nbsp;)


<!-- Prevent automatic line breaks between words -->
C&nbsp;With&nbsp;Sonu

Rendered: C With Sonu (stays on one line)

3) Quotes Inside Attributes


<div title="He said &quot;Hello&quot;">Hover me</div>
Hover me

4) Numeric References (Decimal / Hex)


<!-- Decimal -->
&#169;  <!-- © -->

<!-- Hexadecimal -->
&#x20B9;  <!-- ₹ -->

Rendered: ©   ₹

5) Showing Code Literally


&lt;h1&gt;Codingwithsonu&lt;/h1&gt;

Rendered: <h1>Codingwithsonu</h1>

Tips:

  • Prefer UTF-8 (already set via <meta charset="utf-8">). Use entities only when needed.
  • Use entities in HTML text and attribute values when the character would otherwise break markup.
  • Both named and numeric references are valid. Numeric is universal even when a named variant doesn’t exist.