Unit 15 of 15

Special Characters & Entities

Updated Jun 2026

Some characters have special meaning in HTML — like < and > which define tags. If you type them directly as content, the browser misreads them. HTML entities are the safe way to display these characters, along with accented letters, symbols, and non-breaking spaces.

Concept 1 — What is an HTML entity?

An HTML entity is a short code that represents a character. Every entity starts with & and ends with ;. There are two forms:

  • Named entity — a readable name: &amp; for &
  • Numeric entity — a Unicode code point: &#38; for &

Both produce the same result. Named entities are easier to remember; numeric entities cover every Unicode character.

<p>5 &lt; 10 and 10 &gt; 5</p>
<!-- Renders as: 5 < 10 and 10 > 5 -->

Concept 2 — The essential four

These four must always be escaped when used as content, because they’re part of HTML syntax.

CharacterNamed entityNumeric entityWhen to use
<&lt;&#60;Less-than sign, opening angle bracket
>&gt;&#62;Greater-than sign, closing angle bracket
&&amp;&#38;Ampersand — always escape in content
"&quot;&#34;Double quote inside an attribute value
<!-- Displaying code in prose -->
<p>The &lt;p&gt; tag creates a paragraph.</p>

<!-- Ampersand in text -->
<p>Terms &amp; conditions apply.</p>

<!-- Quote inside an attribute -->
<p title="He said &quot;hello&quot;">Hover over me.</p>

Concept 3 — Common symbols and typography

Beyond the essential four, entities let you display typographic and mathematical symbols that are awkward to type or unsafe to paste directly.

SymbolNamed entityDescription
©&copy;Copyright
®&reg;Registered trademark
&trade;Trademark
&euro;Euro sign
£&pound;Pound sterling
¥&yen;Yen
°&deg;Degree symbol
×&times;Multiplication sign
÷&divide;Division sign
&rarr;Right arrow
&larr;Left arrow
&hearts;Heart suit
&hellip;Ellipsis
&mdash;Em dash
&ndash;En dash
<p>&copy; 2026 My website. All rights reserved.</p>
<p>Temperature today: 22&deg;C</p>
<p>Price: &pound;14.99 or &euro;16.99</p>

Concept 4 — Non-breaking space

The most commonly used entity is &nbsp; — a non-breaking space. Unlike a regular space, it prevents the browser from wrapping a line at that point, and it won’t collapse with adjacent spaces.

<!-- Prevent line break between number and unit -->
<p>The file is 4&nbsp;MB in size.</p>

<!-- Keep a name together on one line -->
<p>Contact&nbsp;us for more details.</p>

Caution: don’t use &nbsp; to create visual spacing or indentation. That’s CSS’s job. Use it only to prevent unwanted line breaks or to force a space in contexts where regular spaces collapse (like inside table cells or certain inline elements).

Concept 5 — Accented characters and Unicode

Modern HTML files saved with UTF-8 encoding (declared with <meta charset="UTF-8">) can include accented and international characters directly — you can type é, ü, ñ, , or العربية straight into your HTML without needing entities.

<!-- These are equivalent in UTF-8 HTML -->
<p>Café</p>
<p>Caf&eacute;</p>

<!-- Direct Unicode is cleaner and more readable -->
<p>Zürich, Montréal, España</p>

Use entities for accented characters only when you’re working in an environment that doesn’t support UTF-8, or when you need to be certain the character survives copy-paste between systems.

Try it yourself

<body>
  <h1>Special characters demo</h1>

  <p>The &lt;img&gt; tag embeds images.</p>
  <p>5 &times; 4 = 20 &amp; 20 &divide; 4 = 5</p>
  <p>Temperature: 37&deg;C</p>
  <p>File size: 2.4&nbsp;GB</p>
  <p>&copy; 2026 My website &mdash; all rights reserved.</p>
  <p>Price: &pound;9.99 (&euro;11.49)</p>

  <p>Direct Unicode: Montréal, Zürich, España</p>
</body>

Quick reference

EntityCharacterDescription
&lt;<Less-than / open tag
&gt;>Greater-than / close tag
&amp;&Ampersand
&quot;"Double quote
&nbsp;(space)Non-breaking space
&copy;©Copyright
&reg;®Registered trademark
&trade;Trademark
&euro;Euro
&pound;£Pound sterling
&deg;°Degree
&mdash;Em dash
&hellip;Ellipsis
&times;×Multiplication