All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

How To Give Tab Space In HTML

Last Updated : Mar 11, 2024

How To Give Tab Space In HTML

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 &nbsp 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">
    <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>
            font-weight: bolder;
        #TabSpace1 {
            tab-size: 2;
            margin-left: 3em;
        # TabSpace3{
            text-indent: 40%;
    <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>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. to add CSS we used <style> tag inside the <head> tag.
  6. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  7. <h1> tag used to add heading here.
  8. for the first method create <pre> tag with the id “TabSpace1”. Then add CSS property tab-size into the <style> tag.
  9. For the second method create some <p> tag and add the ASCII property.
  10. For the third method create <p> tag with the id “TabSpace2”. Then add CSS property margin-left into the <style> tag.
  11. 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.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪