Special characters and entities

Why some characters are special

Browsers read HTML by looking for < to start a tag and & to start an entity. So if you simply write 5 < 10 or Tom & Jerry, you are asking the browser to guess whether you meant text or markup, and it may guess wrong. In particular < followed by a letter will be taken as the start of a tag, and the rest of your text may vanish.

To show those characters safely, you write entities.

What an entity looks like

An entity is a code for one character. It begins with & and ends with ;:

<p>5 &lt; 10 and 10 &gt; 5</p>
<p>Tom &amp; Jerry</p>
<p>&copy; 2026 Sunrise Bakery &mdash; all rights reserved</p>
<p>Price: &#8377;120 &nbsp;&nbsp;&nbsp; (three non-breaking spaces)</p>

There are two kinds:

• Named: <, &, ©. Easier to read and remember.
• Numeric: ₹ (decimal) or ₹ (hexadecimal) for any Unicode character, using its code number.

The ones you must know

The first three matter most. If you are writing a tutorial that shows HTML code, every < in the displayed code must be written <. (The code and pre elements do not turn off markup; entities are still needed.)

Handy symbols

© ©, ® ®, ™ ™, — —, – –, … …, → →, ← ←, × ×, € €, £ £, ° °, ♥ ♥.

You can often type the character instead

Entities were important when files were saved in limited encodings. Today, if you save your file as UTF-8 and declare it, you can type symbols directly:

<meta charset="utf-8">
<p>© 2026 · ₹120 · हिन्दी · café · 日本語</p>

Check that your editor saves as UTF-8 (most do by default). Entities are still required for the three reserved characters (<, >, &), and are useful for characters that are hard to type or easy to confuse, such as the non-breaking space.

Non-breaking space: use with care

  is a space the browser will not collapse or wrap. It has proper uses: keeping a value and its unit together (10 km) or a title and a name (Dr. Rao) so a line never breaks between them.

It is not a layout tool. Strings of     to indent text or space out a menu break on different screens and cannot be styled. Use CSS margin and padding for that.

Escaping inside attributes

If a value contains the quote character that surrounds it, the attribute ends early:

<!-- Broken: the quote ends the value after "He said " -->
<img src="a.jpg" alt="He said "hello"">

<!-- Fixed -->
<img src="a.jpg" alt="He said &quot;hello&quot;">
<!-- or use different outer quotes -->
<img src="a.jpg" alt='He said "hello"'>

In URLs inside attributes, a bare & between query parameters should be &: href="/search?q=bread&page=2".

Invisible characters

Some characters have no visible shape yet still count: a zero-width space, a soft hyphen (­) that allows a word to break, or a left-to-right mark. Text pasted from word processors or chat apps sometimes carries them in and can break spacing or searching. Our free Invisible Character Cleaner tool finds and removes them.

Common mistakes

• A bare < or & in text, which swallows content or invalid markup.
• Forgetting charset, so symbols turn into garbage.
• Typing &copy without the semicolon. Browsers forgive some of these, but not all.
• Using   to lay out a page.
• Showing code samples without escaping <.

Exercise

Write the HTML to show this sentence exactly as text: Use <strong> for important text & <em> for emphasis. Then add a copyright line for 2026.

<p>Use &lt;strong&gt; for important text &amp; &lt;em&gt; for emphasis.</p>
<p>&copy; 2026 Your Name</p>