Jomatter
Write for Us

How Do You Indent in HTML?

By /

You indent HTML code by adding spaces or tabs before nested elements. HTML indentation is mainly used to make your source code easier to read and understand. It normally does not create visible spacing on the webpage.

For example, properly indented HTML looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>My Page</title>
    </head>

    <body>
        <h1>Welcome</h1>
        <p>This is my webpage.</p>
    </body>
</html>

The spaces before <head>, <title>, <body>, and other elements show their relationship to the surrounding elements.

How HTML indentation works

HTML elements are often nested inside other elements. Each time an element starts inside another element, you can indent it one additional level.

For example:

<div>
    <h1>My Website</h1>
    <p>Welcome to my website.</p>
</div>

Here, <h1> and <p> are inside the <div>, so they are indented.

If you put another element inside the paragraph, you can indent it again:

<div>
    <p>
        Welcome to
        <strong>my website</strong>.
    </p>
</div>

The additional indentation makes the nesting easier to see.

How many spaces should you use?

There is no HTML rule requiring a specific number of spaces for source-code indentation. You can use two spaces, four spaces, or tabs.

A common style is four spaces:

<div>
    <section>
        <h2>About Us</h2>
        <p>Our company provides web services.</p>
    </section>
</div>

Another common style is two spaces:

<div>
  <section>
    <h2>About Us</h2>
    <p>Our company provides web services.</p>
  </section>
</div>

Both are valid. The important thing is to use one style consistently throughout your project.

Can you use the Tab key?

Yes. Most code editors let you press the Tab key to indent HTML code.

For example, you might start with:

<div>
<h1>Welcome</h1>
<p>Hello.</p>
</div>

You can select the nested lines and press Tab to produce:

<div>
    <h1>Welcome</h1>
    <p>Hello.</p>
</div>

Most modern HTML editors also automatically indent new lines when you press Enter after opening an element.

For example, after typing:

<div>

and pressing Enter, your editor may automatically produce:

<div>
    |
</div>

The cursor is placed at the appropriate indentation level.

Indent nested lists

Indentation is particularly useful for lists because lists often contain nested elements.

For example:

<ul>
    <li>Home</li>
    <li>Services</li>
    <li>
        Products
        <ul>
            <li>Product One</li>
            <li>Product Two</li>
        </ul>
    </li>
    <li>Contact</li>
</ul>

The second <ul> is indented because it is inside the <li> element.

Without indentation, the same code is much harder to understand:

<ul>
<li>Home</li>
<li>Services</li>
<li>Products
<ul>
<li>Product One</li>
<li>Product Two</li>
</ul>
</li>
<li>Contact</li>
</ul>

Both versions can work the same way in the browser, but the first version is much easier for a person to read.

HTML indentation does not normally indent visible webpage content

This is one of the most important things to understand.

Adding spaces before an HTML element in your source code:

    <p>Hello</p>

does not normally move the paragraph four spaces to the right on the webpage.

Those spaces are source-code formatting.

If you want the actual text on the webpage to be visually indented, use CSS.

For example:

<p class="indented">This paragraph is visually indented.</p>

.indented {
    text-indent: 40px;
}

The text-indent property creates indentation at the beginning of the first line of text.

Use CSS for visual indentation

If your goal is to move an element or text to the right, CSS is the correct solution rather than adding spaces directly to the HTML.

For example:

<div class="box">
    <p>Hello</p>
</div>

You could use:

.box {
    margin-left: 40px;
}

This moves the entire element to the right.

For text indentation:

p {
    text-indent: 40px;
}

For spacing inside an element:

.box {
    padding-left: 40px;
}

These properties control the visual layout of the webpage.

Do not use spaces to visually indent webpage content

You may see people trying to create indentation like this:

<p>&nbsp;&nbsp;&nbsp;&nbsp;Hello</p>

This inserts non-breaking spaces into the rendered content, but it is generally not the correct way to create page layout.

Use CSS instead:

p {
    padding-left: 40px;
}

or:

p {
    text-indent: 40px;
}

The correct choice depends on whether you want to move the entire paragraph or only indent its first line.

What about <pre>?

There is one important exception: the <pre> element preserves whitespace and line breaks in rendered content.

For example:

<pre>
    Hello
        World
</pre>

The browser preserves the whitespace inside <pre> instead of collapsing it like normal HTML text.

This is useful when displaying:

  • Code
  • ASCII art
  • Formatted text
  • Text where spacing matters

However, <pre> is not normally used simply to format your HTML source code. It is used when you actually want the spacing to appear in the webpage.

How to indent HTML attributes

You can also indent attributes when an HTML element contains many attributes.

Instead of writing everything on one long line:

<img src="image.jpg" alt="Example image" width="500" height="300" loading="lazy">

you can format it like this:

<img
    src="image.jpg"
    alt="Example image"
    width="500"
    height="300"
    loading="lazy"
>

This does not change what the browser does. It simply makes the code easier to read and edit.

The same approach can be used with links and other elements:

<a
    href="https://example.com"
    target="_blank"
    rel="noopener"
>
    Visit Example
</a>

Indentation in HTML comments

Comments can also be indented according to their location in the document.

For example:

<div>
    <!-- Main content starts here -->
    <section>
        <h2>About</h2>
        <p>About our company.</p>
    </section>
</div>

This makes the comment clearly associated with the section it describes.

Automatic HTML formatting

Most modern code editors can format HTML automatically.

Editors such as Visual Studio Code can apply consistent indentation to your document. This is useful when you have copied HTML from another source or created a large page manually.

If your code is badly formatted, an HTML formatter can turn something like:

<div><section><h2>Title</h2><p>Text</p></section></div>

into:

<div>
    <section>
        <h2>Title</h2>
        <p>Text</p>
    </section>
</div>

The browser can generally process both versions, but the formatted version is substantially easier to maintain.

What indentation should you use?

For a simple HTML project, use either two spaces, four spaces, or tabs, and keep the same style throughout the project.

A clean four-space example is:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <main>
            <h1>Hello World</h1>
            <p>This is my webpage.</p>
        </main>
    </body>
</html>

The important principle is that every nested level should be visually offset from its parent.

Final answer

To indent HTML code, add spaces or use the Tab key before nested elements:

<div>
    <h1>Title</h1>
    <p>Paragraph</p>
</div>

HTML indentation is primarily for readability and code organization. It does not normally create visible indentation on the webpage.

For visible indentation, use CSS such as:

p {
    text-indent: 40px;
}

or:

p {
    margin-left: 40px;
}

Use HTML indentation to organize your code and CSS to control how the content actually looks in the browser.

More Related Guide

How To Upload Html File To WordPress
How To Add Schema Markup To Html
How To Call A Function In Javascript From Html
How To Center An Iframe In Html
How To Change Plain Text Email To Html
How To Make Text Wrap Around An Image In Html
Are Html And Css Programming Languages
Do My Html Homework
How To Add Alt Tags To Images In Html

Related Posts