How to Add an HTML Tab and Avoid Whitespace Collapse

Adding Tab Space in HTML

Unlike with HTML space, there is no particular HTML tab character you could use. You could technically use the 	 entity as the tab is character 9 in the ASCII. Unfortunately, HTML parsers will simply collapse it into a single space due to the whitespace collapse principle.

There used to be a special tab element. However, it became obsolete in HTML3 more than two decades ago, and even then browsers didn’t support it universally.

One tab in HTML equals four spaces. Unfortunately, due to possible whitespace collapse, you can’t just type in four spaces, as HTML will collapse them all into a single space.

One possible solution is simply using the non-breakable space four times:

    

Preformatting your text is also an option. The <pre> tags preserve both HTML tabs and spaces the way they were typed:

<pre>
Can you see    four spaces?

	What about a tab?<pre>

Remember the browser will display it in a fixed-width font (like Courier) by default. However, you can change it using CSS properties anytime without affecting HTML tabs and spaces.

CSS Alternatives for HTML Tab

Even though it’s useful to know how to tab in HTML, some cases do require using alternatives. When writing text documents, you might use tabs to modify layout or move your text fragments to a different place. In web design, it’s a bit different, and those tasks should be achieved by using CSS properties:

• For text indentation on all paragraphs, use the CSS text-indent property.
• For text indentation on just one paragraph, use CSS inline styling.
• For additional space on one or a few sides of your page, use CSS margin or padding.

HTML Tab: Useful Tips

• Beginners sometimes use HTML tabs to form their text into columns. It’s considered a better practice to use <div> elements and position them as needed with CSS.
• You can use tables to organize tabular data, but don’t rely on them purely for layout.
• If you decide to use CSS properties, use percentages to define the indent width. It’s better for adaptiveness, as the value represents the width in relation to the whole view.