~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/9html-entities

# 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 |
|-----------|--------|-------------|
| `<` | `&lt;` | Less than |
| `>` | `&gt;` | Greater than |
| `&` | `&amp;` | Ampersand |
| `"` | `&quot;` | Double quote |
| `'` | `&apos;` | Apostrophe (XML) |
| `©` | `&copy;` | Copyright |
| `®` | `&reg;` | Registered |
| `™` | `&trade;` | Trademark |
| `€` | `&euro;` | Euro |
| `£` | `&pound;` | Pound |
| `¥` | `&yen;` | Yen |

## Examples

### Displaying Code

```html

<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: `&lt;` renders as `<`

### In Attributes

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

### Quotes in Text

```html
<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:

```html

<p>&#60; &#62; &#38;</p>

<p>&#x3C; &#x3E; &#x26;</p>

<p>&#128516;</p>  
<p>&#x1F600;</p>  
```

## Special Whitespace

HTML collapses whitespace. Use entities for intentional spacing:

```html

<p>Word1    Word2</p>

<p>Word1&nbsp;&nbsp;&nbsp;Word2</p>

<p>Price: $100&nbsp;USD</p>  
<p>&nbsp;&nbsp;&nbsp;&nbsp;Indented text</p>
```

## Complete Example

Here's a complete page using entities:

```html
<!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

```html
<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

```html

<p>User said: &lt;script&gt;alert('hack')&lt;/script&gt;</p>
```

### Preventing Line Breaks

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

## Complete Character Reference

**Mathematical:**
- `&lt;` `&gt;` `&le;` `&ge;` `&ne;` `&plusmn;` `&times;` `&divide;`

**Arrows:**
- `&larr;` `&rarr;` `&uarr;` `&darr;` `&harr;`

**Punctuation:**
- `&ldquo;` `&rdquo;` `&lsquo;` `&rsquo;` `&hellip;` `&mdash;` `&ndash;`

**Currency:**
- `&cent;` `&pound;` `&yen;` `&euro;` `&dollar;`

## Best Practices

1. **Use named entities** — More readable than numeric
2. **Always escape `<`, `>`, `&`** — Required in text content
3. **Use `&nbsp;` for spacing** — When you need non-breaking spaces
4. **Escape user input** — Prevents XSS attacks
5. **Don't overuse entities** — Most characters don't need them

## Common Mistakes

1. **Missing semicolon** — `&lt` instead of `&lt;`
2. **Using entities in URLs** — Use `&amp;` in href attributes
3. **Forgetting to escape `<`** — Browser treats it as a tag
4. **Using numeric for common characters** — Named is more readable
5. **Not escaping user content** — Security vulnerability

No changes yet

cancel