It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

How to Add an HTML Tab and Avoid Whitespace Collapse in Process

Reading time 2 min
Published Aug 21, 2019
Updated Sep 27, 2019

TL;DR – In HTML, tab is a piece of whitespace equal to four HTML spaces in size.

Adding Tab Space in HTML

First, we should note that 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:

Example
    

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

Example
<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 very 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:

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.