Tab Space in HTML

In HTML, white spaces are the characters that are not observable on a web page. A tab space is a character that takes the white space of 4 spaces in HTML, which means a single tab character denotes four white spaces.

The web page will show only one white space when you give many white spaces or tabs in HTML code. Let us see an example to comprehend it properly.

Example

We have added extra white spaces and tab spaces between the words in <title> element, <h1> element and <p> element. We have also added line spaces between the tags. We will see how the web browser responds to the following code.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Whitespace Example
    </title>
</head>
<body>
    
    <h1>    White    space    example   </h1>

    <p> It is the
        paragraph about
        white space in HTML.
    </p>

</body>
</html>

Output:

We can see that extra spaces in the HTML code do not affect the web page because the number of white spaces between the words and tags is only one space.

If you want to add tab space in your HTML, then you do not need to worry because there are many ways to add tab spaces in the HTML:

1. <pre> tag

We can add tab space in the HTML code with the help of <pre> tag. It displays the white spaces or tab spaces as they are added to the HTML code.

Syntax of the <pre> tag:

<pre> is the starting tag, and </pre> is the ending tag, as shown in the above syntax. A text with tab spaces can be written inside the starting and ending tags.

Example:

We will add tab spaces between the words in this example.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of providing tab spaces using &lt;/pre&gt; tag</title>
</head>
<body>
    <h1>Example of providing tab spaces using &lt;/pre&gt; tag</h1>
    <pre>
    <p>This    sentence    has    a    gap    of    one    tab    space    between    the    words.</p>
    </pre>
</body>
</html>

Output:

We can see in the output that there is a tab space between the words in the paragraph.

2. CSS Class

We can use CSS classes to display the tab spaces on the web browser.

.class is the CSS selector used to select the HTML element. A period character, which is (.), and a class is written after the period character to specify the CSS class. The class name should be relevant to the style we want. Since we will display tab spaces, we will use the class name as ".tab-space".

We can use the margin or padding property and provide them values to display the tab space & set the display property to inline-block, which ensures there is no line break after the HTML element. The display with an inline-block value mainly provides space just after the text.

Syntax of the CSS class:

.tab-space {
		display: inline-block:
		margin-left: 40px;
}

The class name in the above syntax is .tab-space. The CSS properties are display and margin-left. The padding property of CSS can also be utilized rather than only the margin-left property.

Example:

We will exemplify tab spaces using the CSS class selector in the example.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration for demonstrating tab spaces using CSS class</title>
    <style>
        .tab-space {
            display: inline-block;
            margin-left: 32px;
        }
    </style>
</head>
<body>
    <h1>Illustration for demonstrating tab spaces using CSS class</h1>
    <p>There<span class="tab-space"></span>is<span class="tab-space"></span>a<span class="tab-space"></span>tab<span class="tab-space"></span>space<span class="tab-space"></span>between<span class="tab-space"></span>each<span class="tab-space"></span>word<span class="tab-space"></span>of<span class="tab-space"></span>this<span class="tab-space"></span>sentence.</p>
</body>
</html>

Output:

We can witness one tab space between each paragraph word in the output.

3. white-space CSS property

The white space is the CSS property we can utilize to demonstrate tab space on the web page. This CSS property demonstrates tab space as they have been written in the HTML code.

Syntax of the white-space CSS property:

white-space is the CSS property with the value assigned to pre-wrap in the provided syntax.

Example:

We will exemplify the white-space property to view the tab spaces between the words.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Illustration for demonstrating tab spaces using white-space CSS property</title>
    <style>
        .tab-space {
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <h1> Illustration for demonstrating tab spaces using white-space CSS property</h1>
    <p class="tab-space">This    sentence    has    a    gap    of    one    tab    space    between    the    words.</p>
</body>
</html>

Output:

We can see a single tab space between each word in the paragraph.

4. HTML entity -  

  is the entity of HTML that we can utilize to demonstrate normal white space or 1 white space gap to display tab space on the web browser using the   HTML entity.

Syntax:

  is the abbreviation for non-breaking space that prevents line breaks and can display tab space using the above syntax.

Example:

In this example, we will use the 4 &nbsp to demonstrate one tab space on the web browser.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example for demonstrating tab spaces using nbsp HTML property</title>
</head>
<body>
    <h1>Example for demonstrating tab spaces using non-breaking space (nbsp) HTML entity</h1>
    <p>We have used non-breaking space (nbsp) HTML entity&nbsp&nbsp&nbsp&nbsp&nbspfor displaying one tab space in this sentence.</p>
</body>
</html>

Output:

We can see one tab space after the word "entity" in the paragraph present in the output.

5. HTML entity - &ensp;

&ensp; is the HTML entity used to demonstrate two white spaces gap to show tab space on the web browser &ensp; HTML entity.

Syntax:

&ensp; is for wide space that can show tab space using the above syntax.

Example:

In this example, we will use the 2 &ensp; to demonstrate two tab spaces on the web browser.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of displaying tab spaces using en space HTML entity</title>
</head>
<body>
    <h1>Example of displaying tab spaces using en space HTML entity</h1>
    <p>Using en space HTML entity for displaying&ensp;&ensp;one tab space in this paragraph.</p>
</body>
</html>

Output:

6. HTML entity - &emsp;

&emsp; is the entity of HTML that we use to denote four white spaces' gap so we can use &emsp; HTML entity and show tab space on the web browser.

Syntax:

&emsp; is used for wider space and can display tab space on the web page using the above syntax.

Example:

We will demonstrate tab spaces on the web browser in this example. We can use one &emsp; to show one tab space and two &emsp; to show two tab spaces.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example for demonstrating tab spaces using em space HTML property</title>
</head>
<body>
    <h1>Example for demonstrating tab spaces using em space HTML entity</h1>
    <p> Using em space HTML entity for displaying one tab?space??in this paragraph.</p>
</body>
</html>

Output:

We can see one tab space after the word "tab" and two after the word "space" in the paragraph.

Conclusion

We have understood the tab space in HTML in the above article. There are many methods to demonstrate tab space on the web page:

<pre> HTML tag: This tag demonstrates tab space characters as they are written inside the <pre> tag.
CSS class: CSS's display and margin-left properties are defined in the .class CSS selector to display tab spaces.
White-space: The CSS property is assigned a pre-wrap value, allowing the user to indicate tab spaces.
Non-breaking space HTML entity: It represents regular white space, which means one white space.
en HTML entity: It symbolizes two white spaces.
em HTML entity: It denotes four white spaces.