In this article we will show you the solution of how to give tab space in HTML, in HTML you cannot directly add tab space. We can add tab space using many ways.
In this tutorial, we will use three methods (For example - ASCII code, CSS property, etc.) to give tab space.
tab character can be added by pressing the Alt and 0,9 together.
Step By Step Guide on Give Tab Space In HTML :-
As previously said we are going to use three different methods to insert tab space.
At first, we will use CSS property tab-space to add tab space with <pre> tag. Here you can use this property only with the <pre> tag in HTML.
Then secondly, use the ASCII property   to insert normal tab space, &ensp to insert two normal tab spaces, and &emsp to use four normal tab spaces.
Thirdly, use the CSS display property to add tab space. The margin-left is used here. CSS property text-indent also can be used.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Give Tab space in HTML</title>
<style>
h1{
color:blue;
font-weight: bolder;
}
#TabSpace1 {
tab-size: 2;
}
#TabSpace2{
margin-left: 3em;
}
# TabSpace3{
text-indent: 40%;
}
</style>
</head>
<body>
<h1> How to Give Tab space in HTML </h1>
<pre id="TabSpace1">tab with 2 normal space</pre>
<p>using to add one normal space gap</p>
<p>using to add two normal spaces gap</p>
<p>using to add four normal spaces gap</p>
<p id="TabSpace2"> using CSS property text-indent to add tab space </p>
<p id=" TabSpace3"> using CSS property text-indent to add tab space</p>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- to add CSS we used <style> tag inside the <head> tag.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- for the first method create <pre> tag with the id “TabSpace1”. Then add CSS property tab-size into the <style> tag.
- For the second method create some <p> tag and add the ASCII property.
- For the third method create <p> tag with the id “TabSpace2”. Then add CSS property margin-left into the <style> tag.
- Lastly create <p> tag with id “TabSpace3”. Then add CSS property “text-indent” to it.
Conclusion :-
Lastly here, in conclusion, here we can say that with the help of this article we can give tab space in HTML.
I hope this article on how to give tab space in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
