Double quotation mark (") in HTML
The straight double quotation mark ends a double quoted attribute value, so it must be written " inside one. In ordinary text content it needs no escaping at all.
At a glance
- Character
- "
- Named entity
- "
- Decimal reference
- "
- Hex reference
- "
- Unicode code point
- U+0022
- Unicode name
- QUOTATION MARK
- In the entity reference
- Punctuation, and pinned in quick access
In detail
Inside a double quoted attribute value the straight quote is a terminator, and an unescaped one ends the value early. Everything after it is then parsed as further attributes, which is how a title attribute containing a quoted phrase can silently invent an attribute named after the next word in your sentence. In text content between tags the same character is inert and needs nothing.
This is the reason attribute escaping and text escaping are genuinely different jobs. A function that handles the less than sign and the ampersand is enough for text; for an attribute you also need the quote that delimits it. Template engines that offer separate helpers for the two contexts are not being fussy, they are encoding a real difference in the parser.
Data attributes carrying JSON are where this bites hardest, because JSON uses the same straight quote for every string key and value. Escaping the payload with " works and is what a correct serializer produces, but the result is unreadable in view source and easy to break by hand. Using single quotes to delimit the attribute is the common alternative and it moves the problem to apostrophes rather than removing it.
Note that this is the straight typewriter quote at U+0022, not the curly typographic pair. Prose that has been through a smart quotes filter contains the curly characters, which are not attribute terminators and never need escaping. If your escaped output is full of " but your rendered page shows curly marks, two different stages are disagreeing about which character you meant.
Examples
<!-- broken: the title ends after the word She -->
<img src="/a.png" alt="She said "hello" loudly">
<!-- correct -->
<img src="/a.png" alt="She said "hello" loudly"><div data-config='{"mode":"compact","rows":10}'>...</div>
<div data-config="{"mode":"compact","rows":10}">...</div>Both are valid. The first is readable, the second survives a serializer that only knows how to emit double quoted attributes.
Things that catch people out
- Unquoted attribute values look tidy until a value contains a space, a quote or a greater than sign. Always quote, and the escaping question becomes a single well defined rule.
- A quote inside a JavaScript string inside an inline event handler needs two layers of thought: the HTML attribute layer and the JavaScript string layer. Moving the handler into a script block removes one of them.
- Escaping the double quote in text content is harmless but noisy. It makes diffs larger and hides real changes.
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 →Apostrophe (') in HTML
' is defined in HTML5 and XML but was absent from HTML 4.01. Why ' is the safer numeric form and when a single quote actually needs escaping.
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