🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

How to Add an HTML Tab and Avoid Whitespace Collapse

Reading time 2 min
Published Aug 21, 2019
Updated Dec 23, 2019

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

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:

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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:

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.