HTML Tab Character

HTML supports one space in the document by default but sometimes we may require to add more than one space. If we add more than one space in the HTML document then it will only show one space character on the web page. Similarly, if we add a tab space then it will show one tab space on the webpage and collapse the other spaces. We will understand how we can create the HTML tab character in this article.

Tab character

A tab character is a typographical space that is equivalent to four spaces but if we add four spaces in the HTML document then it will show only one whitespace and collapse the other.

There are various ways in which we can create tab space which are as follows:

• Utilizing the HTML entities
• Utilizing the <pre> tag
• Utilizing the CSS properties

Let us understand them one by one properly.

Utilizing the HTML entities

There are three HTML entities that help in creating whitespaces without collapsing them. They are given below:

&nbsp;

It represents the non-breaking space. This character is equivalent to the regular space, i.e. one whitespace.

&ensp;

It represents the non-breakable space. This character is equivalent to two whitespaces.

&emsp;

It denotes the non-breakable space which is equivalent to four whitespaces.

Demonstration for creating the tab space utilizing the HTML entities

• &nbsp; create one whitespace so we will use four &nbsp; characters to create a tab space.
• &ensp; creates two whitespaces so we will use two &ensp; characters to create a tab space.
• &emsp; creates four whitespaces so we will use one &emsp; character to create a tab space.

Code:

Output:

Here is the output where we can witness the tab space with the utilization of HTML entities.

Utilizing the <pre> tag

The <pre> tag is utilized to add the tab space in HTML. It displays the preformatted text and shows the whitespace as it is written in the HTML document.

Demonstration for creating the tab space utilizing the <pre> tag

Code:

Output:

Here is the output in which we can witness tab spaces created with the help of the HTML <pre> tag.

Utilizing the CSS properties

We can use display, margin-left and text-indent CSS properties for creating the tab space in the HTML file.

Syntax of display CSS property:

Syntax of margin-left CSS property:

Syntax of text-indent CSS property:

Syntax of white-space CSS property:

Demonstrations for creating the tab space utilizing CSS properties

Demonstration-1

We will create a tab space in this demonstration utilizing the display CSS property and margin-left CSS property.

Code:

Output:

Here is the output in which we can witness a tab space utilizing display and margin-left CSS properties.

Demonstration-2

We will create a tab space in this demonstration utilizing the text-indent CSS property.

Code:

Output:

Here is the output in which we can witness a tab space utilizing the text-indent CSS property.

Demonstration-3

We will create a tab space in this demonstration utilizing the white-space CSS property and set its value to pre.

Output:

Here is the output in which we can witness a tab space utilizing the white-space CSS property.

Conclusion:

We have understood the HTML tab character in this article. We have understood that we can create a tab space utilizing various methods such as Utilizing the HTML entities, <pre> tag and CSS properties.