HTML Entities: A Complete Reference Guide for Developers
HTML entities are special character sequences that allow you to display reserved characters, symbols, and invisible formatting characters in your web pages. Whether you're trying to show a less-than sign without the browser interpreting it as a tag, or you need to insert a copyright symbol into your footer, HTML entities are the mechanism that makes it possible. This comprehensive reference guide covers every entity you'll encounter as a web developer, from the five essential reserved characters to currency symbols, arrows, and typographic marks.
What Are HTML Entities?
An HTML entity is a string of text that begins with an ampersand (&) and ends with a semicolon (;). Between those two characters sits either a human-readable name or a numeric code that tells the browser which character to render. There are two main forms:
- Named entities use a descriptive keyword. For example,
©renders the copyright symbol (©). Named entities are easier to remember but not every character has a named version. - Numeric entities use either a decimal number (
©) or a hexadecimal number (©) that corresponds to the character's Unicode code point. Every Unicode character can be referenced this way, making numeric entities the universal fallback.
When the browser encounters an entity, it replaces it with the corresponding character during rendering. The entity itself never appears in the visible output — only the character it represents.
Why HTML Entities Are Important
HTML entities serve several critical purposes in web development:
- Displaying reserved characters: Characters like
<,>,&, and"have special meaning in HTML. If you type<div>directly, the browser treats it as an HTML tag, not as visible text. Entities let you display these characters literally. - Preventing XSS attacks: Cross-site scripting (XSS) occurs when user-supplied input is rendered as raw HTML. Encoding characters like
<and>as entities neutralizes malicious scripts. This is why every server-side framework encodes output by default. - Inserting special symbols: Characters that don't appear on a standard keyboard — such as ©, ™, €, →, and — — can be inserted reliably using entities.
- Controlling whitespace: The non-breaking space entity (
&nbsp;) prevents browsers from collapsing or line-breaking between words where you need them to stay together.
Essential HTML Entities Every Developer Must Know
These five entities represent HTML's reserved characters. You will use them constantly when writing or generating HTML content. Use our HTML Entity Encoder/Decoder to quickly convert between characters and their entity equivalents.
| Character | Named Entity | Numeric Entity | Description |
|---|---|---|---|
| & | &amp; | &#38; | Ampersand |
| < | &lt; | &#60; | Less than |
| > | &gt; | &#62; | Greater than |
| " | &quot; | &#34; | Double quote |
| ' | &apos; | &#39; | Apostrophe / single quote |
Common Symbol Entities
Beyond the reserved characters, HTML entities give you access to hundreds of useful symbols. Here are the ones web developers reach for most often:
| Symbol | Entity | Description |
|---|---|---|
| © | &copy; | Copyright |
| ® | &reg; | Registered trademark |
| ™ | &trade; | Trademark |
| ° | &deg; | Degree |
| ± | &plusmn; | Plus-minus |
| × | &times; | Multiplication |
| ÷ | &divide; | Division |
| ≠ | &ne; | Not equal |
| ∞ | &infin; | Infinity |
Typography Entities
Professional typography on the web depends on a handful of entities that distinguish proper punctuation from keyboard shortcuts. These are essential for polished content:
| Character | Entity | Description | Usage |
|---|---|---|---|
| — | &mdash; | Em dash | Parenthetical statements — like this |
| – | &ndash; | En dash | Ranges like 2020–2026 |
| … | &hellip; | Horizontal ellipsis | Trailing off… |
| “ ” | &ldquo; &rdquo; | Curly double quotes | “Proper quotation marks” |
| ‘ ’ | &lsquo; &rsquo; | Curly single quotes | ‘Single quotes’ |
| [ ] | &nbsp; | Non-breaking space | Prevents line break between words |
The difference between an em dash and a hyphen, or between curly quotes and straight quotes, is subtle but important for professional-looking content. If you're converting Markdown content to HTML, our Markdown to HTML Converter handles these typographic niceties automatically.
Currency Symbol Entities
Displaying prices and financial data across locales requires reliable currency symbols. Here are the most commonly used currency entities:
| Symbol | Entity | Currency |
|---|---|---|
| $ | &#36; | US Dollar |
| € | &euro; | Euro |
| £ | &pound; | British Pound |
| ¥ | &yen; | Japanese Yen / Chinese Yuan |
| ₹ | &#8377; | Indian Rupee |
| ₿ | &#8383; | Bitcoin |
Note that the dollar sign ($) is not a reserved HTML character, so you can type it directly. However, using the numeric entity &#36; can be useful when generating HTML programmatically to avoid conflicts with template literals or string interpolation in languages like PHP or JavaScript.
Arrow Entities
Arrow symbols are used frequently in navigation, breadcrumbs, pricing comparisons, and UI indicators. HTML provides named entities for the most common ones:
| Symbol | Entity | Description |
|---|---|---|
| ← | &larr; | Left arrow |
| → | &rarr; | Right arrow |
| ↑ | &uarr; | Up arrow |
| ↓ | &darr; | Down arrow |
| ⇐ | &lArr; | Double left arrow |
| ⇒ | &rArr; | Double right arrow |
| ↔ | &harr; | Left-right arrow |
How to Use HTML Entities in Your Code
Using HTML entities is straightforward. You simply place the entity where you want the character to appear in your markup. Here are practical examples:
In HTML
<!-- Displaying code snippets with angle brackets --> <p>Use the <img> tag to embed images.</p> <!-- Copyright notice --> <footer>© 2026 My Company. All rights reserved.</footer> <!-- Prices with currency symbols --> <span class="price">€49.99</span> <!-- Preventing line break between a number and unit --> <p>The file is 250 MB in size.</p> <!-- Navigation breadcrumb with arrows --> <nav>Home → Products → Widgets</nav>
In JavaScript
When working with JavaScript, you have two approaches for inserting entities into the DOM:
// Using innerHTML (entities are parsed)
element.innerHTML = "5 < 10 & 10 > 5";
// Using textContent (entities are NOT parsed, text is auto-escaped)
element.textContent = "5 < 10 & 10 > 5";
// Using Unicode escape sequences
const copyright = "\u00A9 2026 My Company";
// Creating entities programmatically
const encoded = str.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");When converting HTML to JSX for React components, entities behave slightly differently. JSX supports named HTML entities, but numeric entities and some edge cases can trip you up. Our HTML to JSX Converter handles these conversions automatically.
Named vs Numeric Entities
Both named and numeric entities produce identical results in the browser. The choice between them comes down to context:
- Use named entities when readability matters.
&copy;is immediately recognizable as the copyright symbol, while&#169;requires you to look it up. - Use numeric entities when the character has no named equivalent. Many Unicode characters — including the Indian Rupee sign (
&#8377;) and emojis — only have numeric references. - Use hexadecimal numeric entities when you're working with Unicode code charts, which list characters in hex.
&#x20B9;maps directly to the Unicode code point U+20B9. - For maximum compatibility, named entities are supported across all modern browsers for the standard HTML character set. Numeric entities work universally for any Unicode character, even in older XML-based contexts where some named entities may not be recognized.
Common Mistakes with HTML Entities
Even experienced developers make entity-related mistakes. Here are the most frequent pitfalls and how to avoid them:
- Forgetting the semicolon: Writing
&copyinstead of&copy;. While some browsers will still render this correctly due to error recovery, it's technically invalid HTML and can cause parsing issues with adjacent text. - Double encoding: This happens when text is encoded twice — turning
&amp;into&amp;amp;. The user then sees the literal text "&amp;" instead of an ampersand. This is especially common when passing data through multiple processing layers or templating engines. - Using entities in JavaScript strings: HTML entities only work inside HTML markup. Writing
const x = "&copy;"in JavaScript gives you the literal string "©", not the copyright symbol. Use Unicode escapes (\u00A9) or the actual character instead. - Over-encoding: Encoding characters that don't need encoding. Letters, numbers, and most punctuation are safe to use directly in HTML. Only the five reserved characters truly require encoding in most contexts.
- Case sensitivity in named entities: Named entities are case-sensitive.
&Aacute;(Á) and&aacute;(á) produce different characters.
Tools for Working with HTML Entities
While you can memorize the most common entities, having the right tools makes working with them faster and less error-prone. Intellure offers several free tools that handle entity conversion:
- HTML Entity Encoder/Decoder — Paste any text and instantly convert special characters to their HTML entity equivalents, or decode entities back to readable characters. Supports named entities, decimal, and hexadecimal formats.
- HTML to JSX Converter — When migrating HTML templates to React, this tool handles entity conversion alongside attribute renaming, self-closing tags, and other JSX requirements.
- Markdown to HTML Converter — Convert Markdown content to properly encoded HTML, with entities automatically inserted where needed for reserved characters in your output.
These tools are free to use with no sign-up required, and they process everything client-side so your data never leaves your browser.
Frequently Asked Questions
What is the difference between &nbsp; and a regular space?
A regular space in HTML is collapsible — the browser merges multiple consecutive spaces into a single space and may break a line at any space character. The non-breaking space (&nbsp;) prevents both of these behaviors. It always renders as a visible space and keeps the words on either side together on the same line. Common uses include keeping a number and its unit together (e.g., "100 km") or adding intentional spacing in situations where CSS margins aren't appropriate.
Do I need to encode all special characters as HTML entities?
No. With modern UTF-8 encoding (which should be declared in your document's <meta charset="UTF-8"> tag), you can use most special characters directly in your HTML source. The only characters that must be encoded are the five reserved characters: &, <, >, " (inside attribute values), and ' (inside single-quoted attributes). Everything else — accented letters, symbols, emojis — can be typed directly if your file is saved as UTF-8.
Why do I see & instead of & on my web page?
This is a classic case of double encoding. Somewhere in your pipeline, the ampersand was encoded once to become &amp;, and then that was encoded again to become &amp;amp;. When the browser decodes it, it stops after one pass and displays "&amp;" as visible text. The fix is to ensure your content is only encoded once before being inserted into HTML. Check for encoding happening in both your server-side template engine and your database layer.
Can I use HTML entities in CSS or JavaScript?
HTML entities are only interpreted inside HTML markup. In CSS, use Unicode escapes instead — for example, content: "\00A9" for the copyright symbol. In JavaScript, use Unicode escapes like \u00A9 or simply include the character directly in your source code if it's saved as UTF-8. If you need to decode HTML entities in JavaScript (for example, when processing API responses that contain encoded HTML), use the DOMParser API or create a temporary element and read its textContent.
Are HTML entities the same as URL encoding?
No, they are completely different encoding schemes for different contexts. HTML entities (like &amp;) are used to display reserved characters within HTML documents. URL encoding (also called percent-encoding) uses a percent sign followed by hex digits (like %26) to safely include special characters in URLs. Using one in place of the other will produce incorrect results. For example, a space is &nbsp; in HTML but %20 in a URL.
Try These Free Tools
Related Articles
Migrating HTML to React (JSX): A Developer's Guide
A practical guide to converting HTML to JSX for React — covering className, style objects, self-closing tags, event handlers, component architecture, and common migration gotchas.
PX vs REM vs EM: Which CSS Unit Should You Use?
A practical guide to CSS units — what px, rem, and em actually do, when to use each one, and why modern development prefers rem for accessible, scalable layouts.
5 Free Online Tools Every Developer Needs
Discover the essential free online tools that every developer should bookmark — from JSON formatting and regex testing to Base64 encoding and UUID generation.