Is there a HTML character that is blank (including no whitespace) on all browsers?

Question

Is there a HTML character that, on all (major) browsers (plus IE8 sadly) displays nothing and doesn't add any extra space?

So, an alternative to   but which doesn't add whitespace to the page, and which won't ever show up as an ugly "unrecognised character" marker or ?.

---

Why: in my case, I'm trying to work around a problem on an old, proprietary CMS that is removing empty but necessary HTML elements that are required because other parts of the system will fill them dynamically.

Imagine something like (simplified trivial example) <span class="placeholder" data-type="username"></span> which is populated with a user's username if a user is logged in - but this old-school CMS sees it as being empty and removes it.

Answer 1

There seem to be two options that mostly fit the bill. They seem to reliably not show anything when in a <span>, but they (particularly the second option) might have a minor effect on copy/paste and word breaking in some cases.

Zero-width space

​ aka ​ which behaves the same as the (now in HTML5) <wbr> - used to make words break at certain points without changing the display of the words.

<h1>This text is full<span>&#8203;</span> of spans with char<span>&#8203;</span>acte<span></span>rs that affe<span>&#8203;</span>ct word brea<span></span>king but don't show up</h1>  <h1>Especially in das super<span>&#8203;</span>douper&#8203;crazy<span>&#8203;</span>long<span></span>worden.</h1>

Seems to work fine on modern browsers and IE7+ (not tested on IE6).

---

Soft hyphen

­ - like a zero-width space but (in theory) adds a hyphen when it breaks a word across a line.

<h1>This text is full<span>&shy;</span> of spans with char<span>&shy;</span>acte<span></span>rs that affe<span>&shy;</span>ct word brea<span></span>king but don't show up</h1>  <h1>Especially in das super<span>&shy;</span>douper&shy;crazy<span>&shy;</span>long<span></span>worden.</h1>  <h1>Example where das super&shy;douper&shy;crazy&shy;longword contains no spans.</h1>

Fine on modern browsers and IE7+ (not tested on IE6), though as some comments note there are issues with these turning into regular hyphens when copied and pasted, for example, here's how it pastes from Chrome to Notepad, on Windows 8.1:

Within a span, it seems to never add a hyphen (but still better to use zero-width spaces if possible).

---

Edit: I found an older SO answer discussing these as a solution to a different problem which suggests these are robust except for possible copy/paste quirks.

The only other issue with these I could find in research is that apparently some search engines may treat words containing these as being split (e.g. awe­some might match searches for awe and some instead of awesome).

Answer 2

There are two characters that are graphic characters but defined to be zero width: U+200B ZERO WIDTH SPACE and U+FEFF ZERO WIDTH NO-BREAK SPACE. The former acts like a space character, so that it is a separator between words and allows line breaking in formatting, whereas the latter explicitly forbids line breaks. It depends on the purpose and context which one you should use. The can be represented in HTML as ​ and .

There characters work well in most browsing situations. However, in IE 6, they tend to be rendered as small rectangles, since IE 6 does not know these characters and tries to render them as if they were graphic characters (which lack glyphs).

There are also control characters that are allowed in HTML, such as U+200E LEFT-TO-RIGHT MARK and U+200D ZERO WIDTH JOINER. They have no rendering as such, though they may affect rendering of graphic characters, e.g. by setting writing direction, affecting ligature behavior, etc. Due to the possibility of such effects, it might be risky to use them as “dummy” characters.