HTML

HTML

πŸ“Œ HTML Character Entities

πŸ”Ή What Are HTML Entities?

In HTML, some characters have special meanings.

For example:

  1. < β†’ interpreted as the start of a tag
  2. > β†’ interpreted as the end of a tag
  3. & β†’ used to define special character codes

πŸ‘‰ If you write these characters directly, the browser may treat them as HTML code instead of plain text.

πŸ“Œ Solution:

These characters must be written in a special format:

  1. &name; (named entity)
  2. &#number (numeric entity)

This way, they can be safely displayed on the page.

πŸ”Ή Types of Entity Syntax

1 Named Entities

HTML
&lt; &gt; &amp;

πŸ‘‰ Easy to read and the most commonly used method.

2 Numeric Entities

HTML

&#60;  <!-- decimal -->
&#x3C;  <!-- hexadecimal -->

πŸ‘‰ Both represent the < character.

3 Commonly Used Characters

HTML

Character    Entity (Name)    Entity (Number)    Description
<            &lt;             &#60;             Less-than sign
>            &gt;             &#62;             Greater-than sign
&            &amp;            &#38;             Ampersand
"            &quot;           &#34;             Double quote
'            &apos;           &#39;             Single quote
space        &nbsp;           &#160;            Non-breaking space

4 Usage Examples

HTML

<p>5 &lt; 10 and 10 &gt; 5</p>
<p>Tom &amp; Jerry</p>
<p>Display: &quot;Hello World&quot;</p>

πŸ‘‰ Browser output:

  1. 5 < 10 and 10 > 5
  2. Tom & Jerry
  3. Display: "Hello World"

5 Non-Breaking Space (&nbsp;)

Normally in HTML, multiple spaces are displayed as a single space.

πŸ‘‰ When you use &nbsp;:

  1. The space is preserved
  2. Line breaks are prevented

Example

HTML
<p>10&nbsp;km/h</p>

πŸ‘‰ Browser output:

  1. 5 < 10 and 10 > 5
  2. Tom & Jerry
  3. Display: "Hello World"

πŸ‘‰ β€œ10” and β€œkm/h” will not be split into different lines.

6. Using Special Symbols

You can also display symbols that are not available on the keyboard:

HTML

<p>Price: &euro;50</p>
<p>Arrows: &rarr; &larr;</p>

πŸ‘‰ Output:

  1. Price: €50
  2. Arrows: β†’ ←

7. Important Notes

  1. Entity names are case-sensitive
  2. Always end entities with a semicolon (;)
  3. Not all characters have a named entity
  4. πŸ‘‰ In such cases, use numeric codes

  • Summary

  • HTML Entities are used to safely display special characters
  • Characters like <, > and & cannot be written directly

  • Two formats:

  • <&name;> β†’ Keyboard input
  • <&#number;> β†’ Keyboard input
  • <&nbsp;> is especially useful for spacing and preventing line breaks

Html Style Guide
Html Symbol