Using Zero Width Space in HTML

What Is Zero Width Space?

Zero Width Space (U+200B) is a Unicode character that occupies no visual space. Unlike a regular space or even a non-breaking space, it renders as absolutely nothing on screen. The character is invisible, yet it exists in the text stream and can affect how browsers handle line breaks, word boundaries, and text selection.

The Zero Width Space was introduced in Unicode 1.0.0 back in 1991 as part of the initial set of characters designed for international text encoding. It belongs to the General Punctuation block (U+2000–U+206F), which houses various formatting and invisible characters. The character was originally conceived for use in languages like Thai, Khmer, and Lao, where words are not separated by spaces. In those writing systems, ZWS provides a hint to text rendering engines about where line breaks are acceptable, without introducing a visible gap.

Over time, developers adopted Zero Width Space for broader web use cases. It became a tool for controlling line-breaking behavior in HTML, creating invisible placeholders, and even implementing lightweight copy-protection techniques. The character is part of the broader Unicode category of "formatting characters," alongside direction marks, invisible operators, and other non-printing code points.

HTML Entity Code

You can insert Zero Width Space in HTML using any of these methods. Each approach works in different contexts, so knowing all of them gives you flexibility depending on whether you are writing static HTML, generating content with JavaScript, or styling with CSS.

Common Use Cases in HTML

Code Example

Here are practical examples showing how Zero Width Space works in real HTML and JavaScript scenarios.

<!-- Break a long URL at logical points -->
<p>
  Visit&#8203;https://example.com/very/long/path/that/should/wrap
</p>

<!-- Preserve trailing space in a heading -->
<h1>Welcome&#8203;</h1>

<!-- Invisible placeholder for form validation -->
<input type="text" value="&#8203;" />

<!-- Word break inside a compound term -->
<p>
  super&#8203;cali&#8203;fragilistic&#8203;expialidocious
</p>

<!-- JavaScript: dynamically insert ZWS -->
<script>
  const ZWS = '\u200B';
  const longWord = 'antidisestablishmentarianism';
  const breakable = longWord.split('').join(ZWS);
  document.getElementById('output').textContent = breakable;
</script>

<!-- CSS: insert ZWS via pseudo-element -->
<style>
  .watermark::after {
    content: attr(data-zws);
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
</style>

<!-- Python example -->
# Insert ZWS between every character
text = "Hello World"
zws = "\u200B"
breakable = zws.join(text)
print(breakable)  # H\u200Be\u200Bl\u200Bl\u200Bo\u200B \u200BW\u200Bo\u200Br\u200Bl\u200Bd

Browser Compatibility

Zero Width Space is part of the Unicode standard, not a browser-specific feature. This means support is universal across all browsers and operating systems that handle Unicode text. Here is a detailed breakdown:

One thing to keep in mind is that screen readers may behave differently with Zero Width Space. Some assistive technologies skip it entirely, while others may announce it as a "space" or "blank." If accessibility is a concern, test your implementation with NVDA, VoiceOver, and JAWS to ensure the character does not produce unexpected announcements.

Zero Width Space vs Other HTML Spaces

HTML provides several space-related characters, each with distinct behavior. Understanding the differences helps you choose the right one for your use case.

The key difference between Zero Width Space and non-breaking space is their purpose:   keeps words together and adds visible width, while ZWS allows line breaks and adds no width. Use non-breaking space when you want to prevent wrapping (like "100 km/h"), and use Zero Width Space when you want to allow wrapping in places where the browser would not normally break.

SEO Considerations

Search engines treat Zero Width Space with caution. Google's indexing systems generally ignore invisible characters when parsing page content, but there are nuances worth understanding.

Keyword stuffing risk. If you embed Zero Width Spaces inside keywords to create variations that users cannot see—for example, writing "sh​oes" to rank for both "shoes" and "shoes" with different spacing—search engines may flag this as manipulative. Google's spam detection systems are designed to identify and penalize such tactics.

Content extraction. When crawlers extract text from your HTML, Zero Width Spaces are typically stripped out. This means your visible content is what matters for indexing. ZWS used for layout purposes (like line breaking) will not affect your search rankings positively or negatively.

Hidden text policy. Google's webmaster guidelines prohibit hiding text from users while making it visible to search engines. Zero Width Space alone does not trigger this penalty since it does not hide text—it merely affects line breaking. However, combining ZWS with CSS techniques like display: none or font-size: 0 to conceal keyword-stuffed content will result in penalties.

Related Guides