Apostrophe (') in HTML
The straight apostrophe only needs escaping inside a single quoted attribute value. The named form ' is valid in HTML5 and XML but was never part of HTML 4.01, so ' is the portable choice.
At a glance
- Character
- '
- Named entity
- '
- Decimal reference
- '
- Hex reference
- '
- Unicode code point
- U+0027
- Unicode name
- APOSTROPHE
- In the entity reference
- Punctuation, and pinned in quick access
In detail
The apostrophe has an awkward history. XML defined ' from the start and HTML5 adopted it, but HTML 4.01 did not list it, so documents served under that doctype could render the five literal characters instead of the mark. That is why escaping libraries written for a mixed world emit the numeric reference ' rather than the name: the numeric form has always worked everywhere.
As with the double quote, escaping is a context question. Between tags the apostrophe is ordinary text and does not need touching. Inside a single quoted attribute value it is the terminator and must be encoded. Since most markup uses double quoted attributes, most pages never need to escape it at all, which is exactly why the cases that do need it are the ones that slip through review.
It matters more than that in output escaping for security. A value interpolated into a single quoted attribute is a real injection point, and a filter that only handles the double quote leaves it open. Escaping both quote characters unconditionally costs nothing and removes the need to know which style the template used.
This character is the straight vertical apostrophe at U+0027. English typography wants the right single quotation mark at U+2019 for contractions and possessives, which is a different code point with no escaping obligations. Code, on the other hand, wants the straight one, so a smart quotes filter that runs over a code sample is a bug rather than a polish step.
Examples
<button title='It's ready'>Go</button>
<button title="It's ready">Go</button>The second avoids the problem entirely by delimiting with double quotes.
<!-- portable everywhere -->
<p>Don't and won't.</p>
<!-- HTML5 and XML only -->
<p>Don't and won't.</p>Things that catch people out
- An escaping helper that covers the ampersand, both angle brackets and the double quote but not the apostrophe is the classic incomplete five. Single quoted attributes are the hole it leaves.
- Curly quote filters that run across an entire page will convert apostrophes inside code blocks and inside inline JavaScript, producing characters that no parser recognises.
- Search will not match a curly apostrophe against a straight one. If your content pipeline converts them, your search index needs to normalise both forms or users searching for a contraction get nothing.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Double quotation mark (") in HTML
The straight double quote ends an attribute value, so it needs " there. Where that matters, where it does not, and how JSON in a data attribute breaks.
Curly quotes: ‘ ’ “ and ”
The opening and closing single and double curly quotes, their entities and code points, when they help prose and when they break code and search.
Ampersand (&) in HTML
The ampersand opens every character reference, so a bare & in markup is ambiguous. What & fixes, and the query string trap that quietly eats a parameter.
Em dash (—) in HTML
The em dash at U+2014, its named, decimal and hex references, how it differs from the en dash and hyphen, and the practical reasons to prefer a comma.
En dash (–) in HTML
The en dash at U+2013 joins ranges and paired terms. Its entity forms, how wide it really is, and how to stop spreadsheets turning your ranges into dates.
Ellipsis (…) in HTML
The horizontal ellipsis at U+2026 versus three typed periods. Entity forms, line breaking behaviour, search implications and the CSS text-overflow case.
Tools for this
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview
- HTML Entity Encoder Free online HTML entity encoder - encode or decode HTML entities to prevent XSS and display issues