HTML — Entities

Friendly Introduction – What & Why

When you write HTML you sometimes need to show characters that have a special meaning for the browser.
For example, the less‑than sign < starts a tag.
If you type < as plain text, the browser thinks you are opening a new element and the character disappears.
HTML entities are a way to tell the browser “show this exact character, don’t treat it as markup”.
They keep your page safe, accessible, and predictable across all browsers.

Good to know: An entity is just a short piece of text that the browser translates into a single character when it renders the page.

What an Entity Looks Like

An entity always begins with an ampersand & and ends with a semicolon ;.
Between those two symbols you place either a name or a number that identifies the character.

&lt;      <!-- less‑than sign -->
&amp;     <!-- ampersand itself -->
&copy;   <!-- copyright symbol -->

What the browser displays

It shows: <, &, and © exactly as they appear in the list.

Types of Entities

1. Named (or character reference) entities

These use a human‑readable name, like   for a non‑breaking space.
There are about 250 named entities defined by the HTML standard.

<p>Hello&nbsp;world!</p>

What the browser displays

It shows: Hello world! with a space that will not break at the end of a line.

2. Numeric decimal entities

A decimal entity uses the character’s Unicode code point written in base‑10, prefixed by #.
Example: the euro sign (€) has code point 8364, so we write €.

<p>Price: &#8364;99</p>

What the browser displays

It shows: Price: €99

3. Numeric hexadecimal entities

Hexadecimal entities are similar but use base‑16 numbers and start with #x.
The same euro sign becomes € because 20AC is the hex value of 8364.

<p>Price: &#x20AC;99</p>

What the browser displays

It shows: Price: €99 again.

Using Entities Inside Attribute Values

Attribute values are also parsed as markup, so special characters must be escaped there too.

<img src="logo.png" alt="Company &amp; Partners">
<a href="search?q=rock &amp; roll">Rock &amp; Roll</a>

What the browser displays

The image gets an alt text “Company & Partners”.
The link text reads “Rock & Roll”.

Comparison Table

Entity type	Syntax example	Result character	When to prefer
Named	©	©	Readability, common symbols
Decimal	©	©	When you know the decimal code point
Hexadecimal	©	©	When you have the hex code from a Unicode chart

Practical Tips

Common mistake: Forgetting the trailing semicolon. &copy will not be recognized and may appear as literal text.

Common mistake: Using an entity for a character that is safe to type directly, which makes the source harder to read.

Good to know: Modern browsers understand both named and numeric entities, but named ones are more self‑documenting.

Entities and Unicode

Unicode is the universal system that assigns a unique number to every character in every language.
HTML entities are just a shortcut to write those Unicode numbers without leaving your HTML file.

<!-- The Greek letter sigma -->
<p>&#963; or &#x3C3; gives σ</p>

What the browser displays

It shows: σ (the Greek small sigma).

When Not to Use Entities

1. For regular letters and digits – you can type them directly.
2. For whitespace that does not need special handling – use normal spaces.
3. In CSS or JavaScript files – those languages have their own escaping rules.

Real‑World Example: A Table with Mixed Content

<table border="1">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Chocolate &amp; Milk</td>
    <td>&#x20AC;2.50</td>
  </tr>
  <tr>
    <td>5 &lt; 10?</td>
    <td>Yes &gt; No</td>
  </tr>
</table>

What the browser displays

A simple table where the ampersand, less‑than, and greater‑than signs appear as characters, not as markup.

How Entities Interact With HTML5 Doctype

In HTML5 you can write characters directly if the file is saved as UTF‑8, but entities still work the same way.
They are useful when you cannot guarantee the file encoding or when you need to embed characters that are invisible (zero‑width space, etc.).

Summary

• Start an entity with & and end with ;.
• Choose a named entity for readability, numeric for precision.
• Escape characters in text and attribute values.
• Remember the semicolon; otherwise the browser will treat it as normal text.

Common mistakes checklist

• Forgot the trailing semicolon (&copy instead of ©).
• Used an entity for a regular letter (&a;).
• Mixed up decimal and hexadecimal prefixes (&#x41 vs &#65).
• Placed an entity inside a <script> tag without proper escaping.
• Ignored case‑sensitivity in XML‑based XHTML (&Copy; is invalid).

Mini Practice

1. Write a paragraph that shows the text 5 < 10 & 10 > 5 using entities for the symbols.
2. Create a link whose href contains the query string name=Tom & age=30. Encode the ampersand correctly.
3. Display the copyright symbol using a named entity, a decimal entity, and a hexadecimal entity, all in one line.
4. Build a small table that includes a non‑breaking space ( ) between two words in one cell.
5. Insert the Greek letter “π” (pi) using a numeric hexadecimal entity inside an <h2> heading.