HTML HTML Formatter Configuration and Consistent Indentation

Consistent indentation makes a document easy to read. When a child element sits inside a parent, indent the child one level farther than its parent. You do not need to learn everything at once. Follow the example, see what changes, and then try a small change of your own.

What You Need to Know

A formatter can arrange code, but it cannot decide if an element has the right meaning. Use it for readability, then check the HTML structure yourself.

Start small. Save your files in one folder and change one thing at a time. If the page does not look right, check the file you actually opened before changing the code again.

Example: See It in Action

Here is a simple example to experiment with. Type it, save the file, and check what the browser displays.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<main>
    <section>
        <h2>Latest updates</h2>
        <p>Use consistent indentation for nested elements.</p>
    </section>
</main>

Let’s Understand the Example

• Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
• Section groups content around a shared topic and usually has a heading.
• An h2 starts a major section beneath the page topic.

Save the example first, then open the right file in a browser. If you change the source, refresh the browser to compare before and after.

What Should You See?

The page should display “Latest updates” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

Save a copy of your working file before experimenting. Change just one thing, test it in the browser, and compare the result to the original.

Try It Yourself

1. Reindent the example with two or four spaces per level, consistently.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Mixing tabs and spaces randomly or assuming formatting repairs invalid markup.
• If a result does not change, check that the file was saved and that the browser is showing the right path.

Key Takeaways

• Consistent indentation makes a document easy to read.
• Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
• A formatter can arrange code, but it cannot decide if an element has the right meaning. Use it for readability, then check the HTML structure yourself.