Matthew C.
—
The ProblemJump To Solution
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:
Click to Copy
<pre> tab level 0 tab level 1 tab level 2</pre>
The HTML above will render the following text in the browser:
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:
Click to Copy
.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:
Click to Copy
<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:
Click to Copy
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:
