The Character That Vanishes
You write a code example in a blog post. The formatting looks fine. A reader copies it, pastes it into their editor, and it doesn't compile.
Or you set a product name with a hyphen and it breaks across lines in the middle. Or a phone number splits between the area code and the rest. Or a French colon ends up hard against the preceding word instead of separated.
These are all whitespace and punctuation problems, and they're solved by a small set of entities that most developers never learn — because unlike & and <, they aren't about escaping. They're about controlling how text behaves.
Why These Entities Still Matter
In a UTF-8 document, most HTML entities are unnecessary. You can type é directly. You can paste an em dash. The only entities you strictly need for correctness are the ones that would otherwise be parsed as markup — &, <, >, and quotes in attribute values.
The invisible characters are the exception, and for a practical reason: you can't see them in your source.
A non-breaking space and a regular space look identical in your editor. So does a zero-width space next to nothing at all. Writing them as named entities makes them visible, greppable, and reviewable in a diff.
<!-- Which space is this? No way to tell. -->
<span>10 kg</span>
<!-- Unambiguous. -->
<span>10 kg</span>
That's the whole argument. Use the entity form for anything invisible, and the literal character for anything you can see.
The Space Family
— non-breaking space (U+00A0)
A space that prevents a line break at that point. The two things either side stay together.
Legitimate uses:
10 kg <!-- value and unit -->
Figure 3 <!-- label and number -->
Dr Weber <!-- title and name -->
€1 200 <!-- thousands grouping in some locales -->
20 °C <!-- number and degree symbol -->
+44 20 7946 0958 <!-- phone number -->
The rule of thumb: if two adjacent items would look wrong or read confusingly when separated across a line break, join them with .
Abuses to avoid. Using strings of for indentation or layout. This was standard practice in the 1990s and is now a signal of trouble — it doesn't collapse, doesn't reflow, and screen readers may announce each one. Use CSS margin and padding.
Also worth knowing: does not collapse the way a regular space does. Several in a row produce several actual spaces, which is occasionally useful and more often accidental.
  — narrow no-break space (U+202F)
A thinner non-breaking space. Used in French typography before certain punctuation marks, and in some numeric formatting conventions.
Qu'est-ce ?
No widely supported named entity exists, so the numeric reference is the practical option.
  — thin space (U+2009)
A narrow space, breaking. Used between initials, in some numeric groupings, and in typographic fine-tuning.
J. R. R. Tolkien
  and   — en and em spaces
Fixed-width spaces of one en and one em respectively. Rarely the right tool on the web — CSS is almost always better for spacing — but they exist and occasionally appear in content imported from typesetting systems.
Zero-Width Characters
­ — soft hyphen (U+00AD)
An invisible hyphenation hint. It shows nothing normally, and becomes a visible hyphen only if the browser breaks the line at that point.
Donau­dampf­schiff­fahrts­gesellschaft
Extremely useful for German, Dutch, Finnish and other languages with long compounds, and for narrow columns generally. Without it, a long unbreakable word overflows its container.
The catch: a soft hyphen is a real character in the text. If a user copies the word, they may copy the soft hyphens too, producing a string that fails a database lookup. Don't put them in anything users will copy — identifiers, codes, email addresses.
CSS hyphens: auto with a lang attribute is often the better solution, since it uses the browser's hyphenation dictionary. Use ­ where you need control over specific break points the dictionary gets wrong.
​ — zero-width space (U+200B)
A break opportunity with no visible width. Lets a browser wrap a long string without inserting a visible character.
https://example.com/​very/​long/​path
Useful for long URLs and identifiers in narrow layouts. The modern CSS alternative is overflow-wrap: anywhere or word-break: break-word, which doesn't insert characters into the text.
Like the soft hyphen, a zero-width space is a real character. It's a frequent cause of "this string looks identical but doesn't match" bugs when it ends up in data.
⁠ — word joiner (U+2060)
The inverse of a zero-width space: prevents a break without adding width. The modern replacement for the deprecated zero-width no-break space, which is now reserved for its byte-order-mark role.
Directional and Bidirectional Marks
For text mixing left-to-right and right-to-left scripts, a few invisible characters control ordering:
‎— left-to-right mark (U+200E)‏— right-to-left mark (U+200F)
These set the directional context for neighbouring neutral characters like punctuation and spaces. Without them, a full stop at the end of an Arabic phrase inside an English sentence can render on the wrong side.
They're a stopgap. The proper solution is the HTML dir attribute and the <bdi> element, which scope directionality structurally rather than character by character. Use the marks only for fine corrections that structural markup can't reach.
Encoding and Decoding
The HTML Entities tool converts in both directions:
- Paste your text or HTML.
- Choose encode or decode.
- Copy the result.
Decoding is the more revealing operation when debugging. If content is displaying oddly, decode it and look at what characters are actually present. Encoding suspicious text is the other useful direction — it makes invisible characters visible as named or numeric entities, which is often the fastest way to find one.
A note on double encoding: if you see &nbsp; rendered on a page, the ampersand of was itself encoded somewhere in the pipeline. That means content was escaped twice, and the fix belongs at whichever stage escaped already-escaped content — not at the display end.
Practical Tips
Use entities for invisible characters, literals for visible ones. and ­ as entities; é and — as themselves.
Never use for layout. Margin, padding and gap exist.
Keep zero-width characters out of copyable data. Codes, IDs, email addresses, anything a user will paste elsewhere.
Prefer CSS where it can do the job. hyphens: auto beats manual ­ for body text. overflow-wrap beats sprinkled zero-width spaces.
Check your CMS. Many editors insert automatically when you type two spaces, or when content is pasted from a word processor. This is a common source of stray non-breaking spaces in body text.
Watch for in extracted text. When scraping or parsing HTML, a non-breaking space is not a regular space. String comparisons and trimming will behave unexpectedly unless you normalise it.
FAQ
Is the same as a regular space?
No. It's U+00A0, a different character. It prevents line breaks and doesn't collapse with adjacent whitespace.
Should I use for indentation?
No. Use CSS. Non-breaking spaces for layout don't reflow, don't respond to viewport size, and add noise for assistive technology.
What's the difference between a soft hyphen and a regular hyphen? A soft hyphen is invisible unless the line breaks at that point. A regular hyphen is always visible.
Why does copied text sometimes fail to match? Often because it contains a soft hyphen, a zero-width space, or a non-breaking space that looks identical to what you expected.
Do I need entities in a UTF-8 document? Only for characters that would be parsed as markup, and for invisible characters where the entity form makes your source readable.
What's the CSS alternative to ­?
hyphens: auto combined with a correct lang attribute, which uses the browser's built-in hyphenation dictionaries.
The Takeaway
The invisible entities solve a class of problem that CSS mostly can't reach — where a line breaks, whether two things stay together, and how neutral punctuation orders itself in mixed-direction text. Writing them as entities rather than literal characters is what makes them reviewable, and keeping them out of copyable data is what stops them causing bugs later.
Encode and decode HTML entities free with the HTML Entities tool at sadiqbd.com — no sign-up, instant results.
