How do I add a tab space instead of multiple non-breaking spaces ("nbsp")?

Matthew C.

—January 30, 2023

The Problem

You want to add a tab character in HTML instead of using multiple non-breaking space HTML entities ( ). How can you do that?

The   HTML entity is useful for controlling text wrapping. You can add it between two strings to make sure that the strings aren’t separated over two lines if the text wraps onto a new line.

You can also use   to create a tab space, which is often two or four space characters long. But this method for creating a tab space is not recommended as it’s repetitive.

But you can’t simply add white space as needed in your HTML file because whitespace is mostly ignored when HTML is rendered in the browser. Whitespace between words is treated as a single character and whitespace at the start and end of elements and outside elements is ignored.

The Solution

We’ll take a look at three ways to add a tab space instead of using multiple non-breaking spaces:

• Using other HTML entities.
• Using a <pre> tag.
• Using a CSS class.

Using other HTML entities

You can add a tab space using other HTML entity whitespace characters that are wider than the   HTML entity. The   HTML entity is about two spaces wide and   HTML entity is about four spaces wide. The width of these entities depends on the current font.

Using a <pre> tag

A preferred way to add a tab space is to use a <pre> tag, which represents preformatted text where whitespace will be displayed as it’s written in the HTML file.

Here’s how you can use a <pre> tag:

<pre>
    tab level 0
        tab level 1
            tab level 2
</pre>

The HTML above will render the following text in the browser:

    tab level 0
        tab level 1
            tab level 2

Using a CSS class

You can create a .tab CSS class that adds a left margin or padding to an element and sets the display property to inline-block:

.tab {
    display: inline-block;
    margin-left: 4em;
}

Setting display to inline-block will ensure that no line break is added after the element with the .tab class, so the element can be added next to another element.

You can use an HTML element like <span> with the "tab" class to add tab spaces:

    <div>
      <div>tab level 0</div>
      <div><span class="tab"></span>tab level 1</div>
      <div><span class="tab"></span><span class="tab"></span>tab level 2</div>
    </div>

The HTML above will render the following text in the browser:

    tab level 0
        tab level 1
            tab level 2

You could also have a class for each tab level.

Further Reading

If you’re looking to get a deeper understanding of how web performance optimization works, take a look at the following articles:

• Fallbacks for HTTP 404 images in HTML and JavaScript
• 5 easy tips to improve your personal website performance
• Your background images might be causing CLS
• Sentry for Native
• How to Level Up Your Web Development Career
• 11 Habits of Highly Effective Developers