HTML Entities Tutorial

HTML entities let you include characters in your web pages that would otherwise be interpreted as HTML syntax or that aren’t available on your keyboard. By replacing reserved or special characters with entity references, you ensure your markup stays valid and displays exactly what you intend.

HTML Entity Syntax

An HTML entity consists of an ampersand (&), followed by an entity name (or # plus a decimal or hexadecimal code), and a semicolon (;):

&entity_name;
&#decimal_code;
&#xhex_code;

• Named entities (e.g. <,  ) are easier to read and remember.
• Numeric entities (<,  ) guarantee support across all browsers and encodings.
• Hexadecimal entities (<,  ) are an alternative numeric form.

Learning Outcomes

After completing this tutorial, you will be able to:

• Construct named (&name;), numeric (&#number;), and hex (&#xhex;) entities.
• Escape reserved characters (<, >, &, ", ') to prevent markup errors.
• Use common entities ( , <, >, &, ©) and extended symbols (math operators, arrows, Greek letters).
• Apply non-breaking spaces ( ) and combining marks (á → á) effectively.
• Follow best practices: prefer named entities, validate your HTML, and test across browsers.

Common HTML Entities

Here are some of the symbols you’ll use most often:

Symbol	Purpose	Named Entity	Numeric Entity
(space)	Non-breaking space	 	 
<	Less-than sign	&lt;	&#60;
>	Greater-than sign	&gt;	&#62;
&	Ampersand	&amp;	&#38;
"	Double quotation mark	&quot;	&#34;
©	Copyright	&copy;	&#169;
®	Registered trademark	&reg;	&#174;
™	Trademark	&trade;	&#8482;

Reserved Characters

Browsers use <, >, &, and " to parse HTML. To display them in text, encode them as entities:

Character	Description	Entity	Numeric
<	Open angle bracket	&lt;	&#60;
>	Close angle bracket	&gt;	&#62;
&	Ampersand	&amp;	&#38;
"	Double quote	&quot;	&#34;
'	Single quote	&apos;*	&#39;

Note: Some browsers don’t support ' in HTML4. Use ' for single quotes when in doubt.

Example:

<p>Use &lt;div&gt; to create a container element.</p>
<p>Cookies &amp; Cream is a popular ice cream flavor.</p>

Output:

Use <div> to create a container element.

Cookies & Cream is a popular ice cream flavor.

Other Special Characters

Beyond the basics, HTML supports a wide array of symbols: mathematical operators, arrows, Greek letters, playing-card suits, and more.

Symbol	Description	Named Entity	Numeric
∑	Summation	∑	∑
∞	Infinity	∞	∞
°	Degree	°	°
→	Right-arrow	→	→
Ω	Ohm symbol (Omega)	Ω	Ω
♠	Black spade suit	♠	♠

Example:

<p>Math & Symbols</p>
<ul>
  <li>Sum: &sum; (&#8721;)</li>
  <li>Infinity: &infin; (&#8734;)</li>
  <li>Degree: &deg; (&#176;)</li>
  <li>Arrow: &rarr; (&#8594;)</li>
</ul>

Output:

Math & Symbols

• Sum: ∑ (∑)
• Infinity: ∞ (∞)
• Degree: ° (°)
• Arrow: → (→)

Non-Breaking Space

A non-breaking space ( ) prevents text from wrapping at that point. It’s useful for:

• Keeping units together: 10 km, 12:00 PM
• Preserving multiple spaces in a row:

Example:

<p>This sentence has&nbsp;&nbsp;&nbsp;extra spaces.</p>

Output:

This sentence has   extra spaces.

Tip: Browsers collapse plain spaces. Use   when you need exact spacing.

Combining Diacritical Marks

Combine base letters with accent codes to produce accented characters:

Mark	HTML Construct	Result
Grave accent	à	à
Acute accent	á	á
Circumflex	â	â
Tilde	ã	ã
Grave on O	Ò	Ò
Tilde on O	Õ	Õ

Example:

<p>French accents: à, á, â, ã</p>
<p>Portuguese Õ and Ò: &#212;, &#210;</p>

Output:

French accents: à, á, â, ã

Portuguese Õ and Ò: Ô, Ò

Best Practices for HTML Entities

Prefer Named Entities for Readability

Named entities (e.g. <, €) are self-documenting and easier to scan in your source code. When you or another developer revisit your HTML, seeing © immediately conveys “copyright symbol,” whereas © may require a lookup.

Use Numeric Entities for Unnamed Characters

Some symbols don’t have a named entity (for example, 𝄞 — the musical G-clef). In these cases, use a numeric reference (𝄞 or 𝄞) to ensure browser support across charsets.

Keep Your Charset in Mind

If your page declares UTF-8 (<meta charset="UTF-8">), you can often type most Unicode characters directly. However, always encode the five core reserved characters (<, >, &, ", ') to avoid breaking your HTML, regardless of charset.

Test Across Browsers and Devices

Different browsers and platforms may have subtle differences in entity support—especially for newer or less common symbols. Preview your pages in Chrome, Firefox, Safari, and mobile browsers to verify that every entity renders correctly.

Document Any Custom Entities or Shortcuts

If your project uses a build step (e.g., templating, Markdown), document any automatic entity conversions or shortcuts. For example, some static-site generators convert – to – at build time—clarify these behaviors in your README so contributors know when manual encoding is required.

Avoid Overuse for Readability

While entities are essential for reserved and special characters, don’t over-encode everyday text. Writing "café" directly (in a UTF-8 document) is more readable than café. Reserve entities for cases where they prevent ambiguity or parsing errors.

FAQs on HTML Entities

Are HTML entities case-sensitive?

Yes. Named entities must match the exact case defined by the HTML specification (e.g.,   works, but   does not). Numeric entities (<, <) are not case-sensitive for the hex digits (you can use <), but the leading x must be lowercase.

How do I add a non-breaking hyphen?

Use the numeric entity ‑. For example:

co‑worker

This ensures “co-worker” never breaks across lines.

Can I use entities inside HTML attributes?

Absolutely. Entities work in both element text and attribute values. Example:

<a href="search?q=Tom&amp;Jerry">Search for Tom & Jerry</a>

Just be sure to encode any reserved characters (&, ", <, >) so the attribute remains valid.

Why does & sometimes render as “&” in the browser?

That usually means it’s been double-encoded. If you write &, the browser decodes the first pass to & and displays that literally. Always check your source to ensure you only encode once.

Can I use HTML entities in CSS or JavaScript?

In CSS, you can use Unicode escape sequences (e.g., \00A9 for ©) rather than HTML entities. In JavaScript strings, use \u00A9. HTML entities only work in HTML or XML markup, not in external CSS or JS files.

Is it better to use entities or direct characters in a UTF-8 document?

For most non-reserved Unicode characters, typing them directly (e.g., “✓”) is fine in a UTF-8 page. Reserve entities for characters that would otherwise break your HTML (<, >, &, ", ') or when you want to ensure backward compatibility with older encodings.