HTML Entities & Special Characters

HTML entities display reserved characters or characters difficult to type. They start with & and end with ;.

Why Entities?

Some characters have special meaning in HTML:

< and > define tags
& starts entities
" defines attribute values

To display these characters as text, you need entities.

Common Named Entities

Character	Entity	Description
`<`	`<`	Less than
`>`	`>`	Greater than
`&`	`&`	Ampersand
`"`	`"`	Double quote
`'`	`'`	Apostrophe (XML)
`©`	`©`	Copyright
`®`	`®`	Registered
`™`	`™`	Trademark
`€`	`€`	Euro
`£`	`£`	Pound
`¥`	`¥`	Yen

Examples

Displaying Code

<!-- Show HTML code without executing it -->
<p>To create a paragraph, use &lt;p&gt; tags.</p>
<p>
  Use &amp; to create entities: &amp;lt; renders as &lt;
</p>

Result: To create a paragraph, use <p> tags. Use & to create entities: < renders as <

In Attributes

<a href="page.html?q=1&amp;s=2">Link</a>
<img alt="Fish &amp; Chips" src="food.jpg" />

Quotes in Text

<p>He said &quot;Hello!&quot; and left.</p>
<p>It's a beautiful day.</p>

Result: He said “Hello!” and left. It’s a beautiful day.

Numeric Entities

Use character codes (decimal or hexadecimal) for any character:

<!-- Decimal -->
<p>&#60; &#62; &#38;</p>  <!-- < > & -->

<!-- Hexadecimal -->
<p>&#x3C; &#x3E; &#x26;</p>  <!-- < > & -->

<!-- Any Unicode character -->
<p>&#128516;</p>  <!-- 😊 emoji -->
<p>&#x1F600;</p>  <!-- 😀 emoji -->

Special Whitespace

HTML collapses whitespace. Use entities for intentional spacing:

<!-- Normal spaces collapse -->
<p>Word1    Word2</p>  <!-- Renders as: Word1 Word2 -->

<!-- Non-breaking space keeps words together -->
<p>Word1&nbsp;&nbsp;&nbsp;Word2</p>  <!-- Keeps words on same line -->

<!-- Useful for: -->
<p>Price: $100&nbsp;USD</p>  <!-- Prevents line break -->
<p>&nbsp;&nbsp;&nbsp;&nbsp;Indented text</p>

Complete Example

Here’s a complete page using entities:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML Entities Demo</title>
  </head>
  <body>
    <h1>Special Characters in HTML</h1>

    <section>
      <h2>Displaying Code</h2>
      <p>
        To create a paragraph: &lt;p&gt;Your text&lt;/p&gt;
      </p>
      <p>
        Links use &amp;href attribute: &lt;a href=&quot;url&quot;&gt;
      </p>
    </section>

    <section>
      <h2>Mathematical Symbols</h2>
      <p>Less than: &lt;</p>
      <p>Greater than: &gt;</p>
      <p>Equal to: =</p>
      <p>Not equal: &ne;</p>
      <p>Plus/minus: &plusmn;</p>
      <p>Multiplication: &times;</p>
      <p>Division: &divide;</p>
    </section>

    <section>
      <h2>Currency</h2>
      <p>Dollar: $</p>
      <p>Euro: &euro;</p>
      <p>Pound: &pound;</p>
      <p>Yen: &yen;</p>
    </section>

    <section>
      <h2>Legal Symbols</h2>
      <p>Copyright: &copy; 2026 My Company</p>
      <p>Registered: &reg;</p>
      <p>Trademark: &trade;</p>
    </section>

    <section>
      <h2>Quotes</h2>
      <p>
        He said &ldquo;Hello&rdquo; and she replied &ldquo;Hi!&rdquo;
      </p>
      <p>
        It&rsquo;s a beautiful day, isn&rsquo;t it?
      </p>
    </section>

    <section>
      <h2>Arrows</h2>
      <p>Left: &larr;</p>
      <p>Right: &rarr;</p>
      <p>Up: &uarr;</p>
      <p>Down: &darr;</p>
    </section>

    <section>
      <h2>Emojis (Numeric Entities)</h2>
      <p>Happy: &#128513;</p>
      <p>Thumbs up: &#128077;</p>
      <p>Star: &#11088;</p>
    </section>
  </body>
</html>

Common Use Cases

Displaying HTML in Documentation

<p>
  The &lt;img&gt; element requires the src attribute.<br />
  Example: &lt;img src=&quot;photo.jpg&quot; alt=&quot;Photo&quot; /&gt;
</p>

User-Generated Content

<!-- Always escape user input to prevent XSS -->
<p>User said: &lt;script&gt;alert('hack')&lt;/script&gt;</p>

Preventing Line Breaks

<p>
  CDN URL: https://example.com/path/to/very/long/file.js
  &nbsp;(bookmark this)
</p>

Complete Character Reference

Mathematical:

< > ≤ ≥ ≠ ± × ÷

Arrows:

← → ↑ ↓ ↔

Punctuation:

“ ” ‘ ’ … — –

Currency:

¢ £ ¥ € &dollar;

Legal:

Best Practices

Use named entities — More readable than numeric
Always escape <, >, & — Required in text content
Use   for spacing — When you need non-breaking spaces
Escape user input — Prevents XSS attacks
Don’t overuse entities — Most characters don’t need them

Common Mistakes

Missing semicolon — &lt instead of <
Using entities in URLs — Use & in href attributes
Forgetting to escape < — Browser treats it as a tag
Using numeric for common characters — Named is more readable
Not escaping user content — Security vulnerability