HTML Entities
Understand why certain characters must be written as HTML entities instead of typed literally, and learn the most common named entities and numeric character references.
A handful of characters carry special meaning to the HTML parser — you can't just type them into your content and expect them to show up as literal text. HTML entities solve this by giving you a safe, unambiguous way to represent reserved characters, symbols, and non-standard whitespace.
Why reserved characters need entities
HTML uses < and > to mark the start and end of tags, and & to start entity references themselves. If you type <div>Use x < y to compare</div> literally, the parser sees < y and tries to interpret it as the beginning of a new tag, breaking your markup (and, worse, potentially opening a security hole if that text came from user input — this is the root cause of many cross-site-scripting vulnerabilities).
The fix is to write these reserved characters as entities: < for <, > for >, and & for & itself (since & is how entities begin, a literal ampersand must also be escaped or it may be misread as the start of another entity).
The core reserved-character entities
< renders as <. > renders as >. & renders as &. " renders as a literal double quote ", useful inside an attribute value that is itself delimited by double quotes. These four are the ones every developer needs memorized — they come up constantly whenever you display code snippets, comparison operators, or user-generated text on a page.
Whitespace and common symbol entities
is a non-breaking space — visually identical to a regular space, but it prevents the browser from breaking a line at that point (so "10 km" never wraps awkwardly with "10" at the end of one line and "km" at the start of the next), and unlike regular whitespace, HTML won't collapse multiple consecutive into one.
© renders the copyright symbol ©. — renders an em dash —, often used for a strong parenthetical break in writing, longer than a hyphen (-) or en dash (–). There are dozens of other named entities for symbols like ™ (™), ® (®), and accented letters, but these are the ones you'll reach for most often.
Numeric character references and Unicode
Every character has a Unicode code point — a unique number. Beyond the small set of named entities, any character can be written as a numeric character reference: © (decimal) or © (hexadecimal) both render ©, identical to ©. This matters because not every possible character has a memorable named entity — emoji, rare symbols, and characters from many scripts are typically written using their numeric code point instead.
In practice, with the page correctly declared as UTF-8 (see the Metadata lesson), you can usually just type most Unicode characters — like é, ñ, or emoji — directly into your HTML source rather than reaching for an entity. Entities remain essential specifically for the reserved characters (<, >, &) and for cases where you need a guaranteed, unambiguous representation regardless of file encoding.
Entity syntax forms
Every entity reference starts with & and ends with ;. Named entities are case-sensitive (& is valid, & is not the same reference).
&name; <!-- named entity, e.g. & -->
&#DDDD; <!-- decimal numeric reference, e.g. © -->
&#xHHHH; <!-- hexadecimal numeric reference, e.g. © -->Code Examples
Without escaping, the browser would try to parse < b && b < as HTML markup instead of displaying it as literal text — entities keep it safely as visible characters. Expected result: In JavaScript, use if (a < b && b < c) to check ordering.
keeps '120 km/h' from ever splitting across two lines; © and — render © and — without needing special keyboard input. Expected result: Top speed: 120 km/h © 2026 SampleApp — All rights reserved.
All three notations render the exact same © character — named entities are just a more memorable alias for a specific numeric code point. Expected result: © is the same as © is the same as ©
<p>In JavaScript, use <code>if (a < b && b < c)</code> to check ordering.</p><p>Top speed: 120 km/h</p>
<footer>© 2026 SampleApp — All rights reserved.</footer><p>© is the same as © is the same as ©</p>Important Rules
Always escape <, >, and & when displaying them as literal text content, never as markup.
Use " when a literal double quote needs to appear inside a double-quoted attribute value.
Prefer specifically where a line break would look wrong — don't use it as a general substitute for CSS spacing/margins.
When in doubt between a named entity and typing the character directly, named entities are safer for reserved characters; direct Unicode input is fine for everything else on a correctly UTF-8-declared page.
In practice
This is exactly why displaying user-submitted comments safely matters: if a user types <script>alert('hacked')</script> into a comment box and your server renders it back into the page unescaped, the browser executes it as real script — a classic stored cross-site-scripting (XSS) vulnerability. Every serious templating engine (React's JSX, Vue templates, server-side frameworks) automatically escapes text content into entities like < and > before injecting it into HTML, specifically to prevent this.
<p>Compare: 5 < 10 & 10 > 5</p> The literal < is parsed as the start of a tag and & can be misread as the start of a broken entity — browsers often recover gracefully with fallback parsing, but the output becomes unpredictable and invalid HTML.
<button onclick="alert('It's done')"> <button onclick="alert("It's done")">
Mixing quote types incorrectly inside an attribute can break parsing; the safe pattern is to escape whichever quote character matches the attribute's own delimiter.
[True / False] Since the apostrophe character (') has no special meaning to the HTML parser when it appears in regular text content (not inside an attribute value), it is technically safe to leave unescaped, unlike <, >, and &. A. True B. False
A. True — True. The three characters that must always be escaped in text content are <, >, and & (because they trigger tag/entity parsing). A literal apostrophe or straight double quote in ordinary text content doesn't confuse the parser — " and ' matter specifically when quoting inside an attribute value delimited by that same quote character.
Write a paragraph that correctly displays the literal text: Use <strong> & <em> together — it's usually too much.
<p>Use <strong> & <em> together — it's usually too much.</p>
You need entities for <, >, &, and the apostrophe doesn't strictly need escaping inside regular text (only &, <, > require it) — try it both ways.