In HTML, white spaces refer to characters that are not visibly displayed on a webpage. Specifically, a tab space in HTML is a character that represents the equivalent of four white spaces. This indicates that each tab character signifies four white spaces.
In HTML code, if multiple white spaces or tabs are provided, the web page will display only a single white space. Let's explore an example to better understand this behavior.
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:
It is evident that additional spaces within the HTML code have no impact on the appearance of the web page as the quantity of white spaces between words and tags is limited to one space.
When you need to insert tab spaces in your HTML code, rest assured that there are numerous methods available for achieving this task seamlessly within HTML:
1. <pre> tag
To include tab spaces within HTML code, the <pre> tag can be utilized. This tag is responsible for rendering white spaces or tab spaces exactly as they have been inserted into the HTML code.
Syntax of the <pre> tag:
<pre>Some text with tab spaces</pre>
<pre> represents the opening tag, while </pre> indicates the closing tag, as illustrated in the syntax provided. It is possible to include text with tab spaces within these tags.
Example:
In this illustration, we will insert tab characters between each word.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of providing tab spaces using </pre> tag</title>
</head>
<body>
<h1>Example of providing tab spaces using </pre> tag</h1>
<pre>
<p>This sentence has a gap of one tab space between the words.</p>
</pre>
</body>
</html>
Output:
The presence of a tab space between words can be observed in the displayed output.
2. CSS Class
CSS classes are utilized for presenting tab spaces on a web browser.
We can use CSS classes to display the tab spaces on the web browser.
One way to create space and prevent line breaks after an HTML element is by setting values for the margin or padding properties. By setting the display property to inline-block, we can maintain the tab space and prevent line breaks immediately after the element. When the display property is set to inline-block, it ensures that space is reserved right after the text content.
Syntax of the CSS class:
.tab-space {
display: inline-block:
margin-left: 40px;
}
In the code snippet provided, the class is referred to as .tab-space. The CSS attributes involved are display and margin-left. It is also possible to make use of the padding attribute in CSS in addition to solely relying on the margin-left property.
Example:
Let's demonstrate the utilization of tab spaces by employing the CSS class selector in this illustration.
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:
You will observe a single tab space between each word in the output paragraphs.
3. white-space CSS property
The white-space CSS property can be used to show tab space on a webpage, reflecting the tab spaces used in the HTML code.
Syntax of the white-space CSS property:
white-space: pre-wrap;
The CSS property in the given syntax is set to pre-wrap, defining the white-space.
Example:
Let's demonstrate the white-space property to observe the tab spaces that separate 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:
In the paragraph, there is a solitary tab space separating each word.
4. HTML entity -
The entity in HTML is used to represent regular white space or a single space gap to simulate a tab space in a web browser using the HTML entity.
Syntax:
NBSP stands for non-breaking space, which is used to prevent line breaks and represent tab space with the provided syntax.
Example:
In this instance, we will utilize the character entity reference "nbsp" to illustrate a single tab space within a 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     for displaying one tab space in this sentence.</p>
</body>
</html>
Output:
In the displayed output, a single tab space is observable following the term "entity" within the paragraph.
5. HTML entity -  
The HTML entity   is utilized to represent a double white space distance, simulating a tab space within a web browser when displayed.
Syntax:
 
The   entity represents a wide space that can be utilized to display tab spacing in accordance with the syntax provided above.
Example:
In this instance, we will utilize the number 2 to illustrate the representation of two tab spaces within a 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  one tab space in this paragraph.</p>
</body>
</html>
Output:
6. HTML entity -  
The   entity in HTML represents a gap equivalent to four white spaces, enabling the display of tab spaces in a web browser by utilizing the   HTML entity.
Syntax:
 
The   entity is utilized to create a wider space on a webpage and can represent a tab space through the syntax demonstrated above.
Example:
In this example, we will showcase the concept of tab spaces on a web browser. Using a single   will represent one tab space, while using two   will indicate 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:
In the paragraph, there is a single tab space following the word "tab" and two tab spaces following the word "space".
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.