HTML entities

HTML entities are special codes used in HTML to represent characters that either have a reserved meaning in HTML or are not easily typed or displayed in the content. These entities allow you to include special symbols, characters, and reserved HTML characters in your web pages without causing issues with the markup or display.

Why HTML Entities Are Used:

  1. Reserved Characters: Some characters have special meanings in HTML. For example, the < and > characters are used to define HTML tags, so if you want to display them as text, you need to use HTML entities.

  2. Special Symbols: Some symbols (like ©, ®, or ) aren't easily typed from a standard keyboard, so HTML entities are used to display them.

  3. Non-ASCII Characters: Entities are also used to represent characters from different languages or character sets that aren't part of the standard ASCII set.

Syntax of HTML Entities:

An HTML entity begins with & and ends with ;. Inside these delimiters, there is either:

  • A named entity (e.g., &amp;).

  • A numeric entity in decimal form (e.g., &#169;).

  • A numeric entity in hexadecimal form (e.g., &#xA9;).

Common HTML Entities:

CharacterEntity NameEntity Number (Decimal)Entity Number (Hex)Description
<&lt;&#60;&#x3C;Less than sign (used in HTML tags)
>&gt;&#62;&#x3E;Greater than sign (used in HTML tags)
&&amp;&#38;&#x26;Ampersand
"&quot;&#34;&#x22;Double quote
'&apos;&#39;&#x27;Single quote or apostrophe
©&copy;&#169;&#xA9;Copyright symbol
®&reg;&#174;&#xAE;Registered trademark symbol
&trade;&#8482;&#x2122;Trademark symbol
£&pound;&#163;&#xA3;Pound sign
&euro;&#8364;&#x20AC;Euro sign
¢&cent;&#162;&#xA2;Cent sign
&nbsp;&#160;&#xA0;Non-breaking space

Examples of HTML Entities:

  1. Displaying reserved characters in HTML:

     <p>To use a less than symbol, type: &lt; instead of <</p>
    

  2. Displaying special symbols:

     <p>Copyright symbol: &copy; 2024 MyWebsite</p>
    

  3. Using non-breaking space (&nbsp;):

     <p>Normal space vs&nbsp;&nbsp;&nbsp;non-breaking spaces.</p>
    

This will display extra spaces because &nbsp; prevents the collapsing of multiple spaces, unlike regular spaces in HTML.