HTML typically displays a single space in a document by default. However, there are instances where we might need to include multiple spaces. In such cases, even if we add multiple spaces in the HTML code, the webpage will render only a single space character. The same applies to tab spaces; adding a tab space will result in only one tab space being displayed on the webpage, compressing any additional spaces. In this guide, we will explore the process of generating the HTML tab character.
Tab character
A tab character is a form of spacing in typography that equals four spaces. However, when four spaces are inserted in an HTML file, only one space will appear, causing the rest to collapse.
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
Three HTML entities are available to assist in creating non-collapsible whitespaces. These entities are listed as follows:
It represents the non-breaking space. This character is equivalent to the regular space, i.e. one whitespace .
 
It represents the non-breakable space. This character is equivalent to two whitespaces .
 
It represents a non-breaking space that is equal to four regular spaces.
Demonstration for creating the tab space utilizing the HTML entities
- create one whitespace so we will use four characters to create a tab space.
-   creates two whitespaces so we will use two   characters to create a tab space.
-   creates four whitespaces so we will use one   character to create a tab space.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilizing HTML entities to create tab space</title>
<style>
</style>
</head>
<body>
<h2>Utilizing HTML entities for creating tab space</h2>
<div>
<h3>non-breaking space:</h3>
<p>We have used four����non-breaking space (�) to create one tab space.</p>
</div>
<div>
<h3>en-space:</h3>
<p>We have used??two non-breaking space (&ensp) to create one tab space.</p>
</div>
<div>
<h3>em-space:</h3>
<p>We have used?one non-breaking space (&emsp) to create one tab space.</p>
</div>
</body>
</html>
Output:
Below is the result that demonstrates the indentation using HTML entities.
Utilizing the <pre> tag
The <pre> tag is employed in HTML to insert tab space. It renders preformatted text, preserving the whitespace exactly as it appears in the HTML file.
Demonstration for creating the tab space utilizing the <pre> tag
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilizing <pre> to create a tab space</title>
</head>
<body>
<h2>Utilizing <pre> for making a tab space</h2>
<div>
<pre>This line has one tab space.<br>This line has two tab spaces.<br>This line has three tab spaces.
</pre>
</div>
</body>
</html>
Output:
The following output demonstrates the creation of tab spaces using the HTML <pre> element.
Utilizing the CSS properties
The tab space in an HTML file can be established by employing the CSS properties like display, margin-left, and text-indent.
Syntax of display CSS property:
display: value;
Syntax of margin-left CSS property:
margin-left: length;
Syntax of text-indent CSS property:
text-indent: length;
Syntax of white-space CSS property:
white-space: pre;
Demonstrations for creating the tab space utilizing CSS properties
Demonstration-1
In this example, we will generate an indented space using the display CSS attribute in combination with the margin-left CSS property.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilizing display and margin-left CSS properties to create a tab space</title>
<style>
.tab-space {
display: inline-block;
margin-left: 20px;
}
</style>
</head>
<body>
<h2>Utilizing display and margin-left CSS properties for creating a tab space</h2>
<div>
<p>
This line has a<span class="tab-space"></span>tab space.
</p>
</div>
</body>
</html>
Output:
Below is the result where we can observe the utilization of the CSS properties display and margin-left to create an indentation.
Demonstration-2
In this example, we will demonstrate how to generate an indentation for a tab using the CSS property called text-indent.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilizing text-indent CSS property to create a tab space</title>
<style>
p {
text-indent: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<h2>Utilizing text-indent CSS property to create a tab space</h2>
<div>
<p>
This line has a tab space.
</p>
</div>
</body>
</html>
Output:
Below is the result demonstrating the usage of a tab space through the CSS property text-indent.
Demonstration-3
In this example, we will generate an indented space using the CSS property white-space with a value of pre.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilizing white-space CSS property to create a tab space</title>
<style>
p {
white-space: pre;
border: 1px solid yellowgreen;
}
</style>
</head>
<body>
<h2>Utilizing white-space CSS property to create a tab space</h2>
<div>
<p> This line has a tab space at the start.
</p>
</div>
</body>
</html>
Output:
The following output demonstrates the utilization of a tab space by employing the CSS property called white-space.
Conclusion:
In this guide, we have explored the concept of the HTML tab character. We have learned that we can generate a tab space using different techniques like employing HTML entities, the <pre> element, and CSS properties.