We help businesses stand out, so they significantly increase their chance of converting more leads

+ 0 %

Increase in conversion off a high base - Manufacturer

0 %

Increase on conversion rate - B2B Service Business

+ 0 %

Increase on leads with a simple 1 page UX/UI revamp - B2B

+ 0

Awards & mentions across 4 different industries since 2009

Need a strategy?
Let’s point you in
the right direction

21 Feb 25

How To Indent In HTML?

Julian Chan | Web Development

Alright. Let’s be real for a second.

HTML doesn’t care how you space your code. You could smash all your tags together in one giant wall of text and the browser would still spit out the page just fine.

But you? And your team? You’re not browsers. You’re humans trying to read, fix, and build on that code. And that’s where indentation comes in.

After building websites for more than two decades, I can tell you — the difference between clean code and spaghetti code is usually just a few simple habits. Indentation is one of them.

Let’s break it down.

So What Exactly Is Indentation?

Think of indentation like organising your kitchen drawers.

When you put forks with forks and knives with knives, everything’s easier to find. Indentation does the same thing for your HTML: it adds spaces or tabs before lines of code so you can instantly see which elements sit inside others.

Technically? It changes nothing. The browser ignores it.

Practically? It changes everything. You, your coworker, or even future you six months from now will thank you.

Why Bother? (Hint: You Absolutely Should)

Here’s where indentation starts paying off:

1) Readability

When you’re nesting elements — like a <div> inside a <section> — indentation makes the structure crystal clear. You instantly see what belongs where.

2) Team Collaboration

Ever jumped into someone else’s code and thought, what in the world is happening here? Proper indentation means your team can actually follow your work without cursing your name.

3) Debugging

Missing closing tag? Floating <div>? Bad nesting? Indentation helps you spot these headaches fast. Trust me — when you’re chasing a bug at 11:45pm, you’ll be glad you indented.

I still remember back in 2011 when we were building an e-commerce platform for a client. One rogue <div> killed the entire checkout page. We found it in 5 minutes — only because the indentation made the broken structure stand out like a sore thumb.

The Basics: How To Indent HTML Properly

Honestly, this part’s simple. Just follow a few golden rules:

Pick tabs or spaces. Stick with it. Don’t mix.
Every time you nest an element, indent one level deeper.
Make your code look like an outline, not a paragraph.

Example of what not to do:

<html><body><div><p>Hello World</p></div></body></html>

Here’s how you want it:

<html> <body> <div> <p>Hello World</p> </div> </body> </html>

See? You breathe just looking at it.

Spaces vs Tabs: The Never-Ending War

Ah yes — the debate that never dies.

Spaces (2 or 4): Most dev teams I’ve worked with settle on spaces. They render consistently no matter what editor or system you’re using.
Tabs: Tabs let individuals set their own tab width in their editor. Great for personal projects, sometimes messy in teams.

Look — I personally lean towards 2 spaces. Less visual clutter. Most teams I’ve worked with over the years — from corporate builds to startup MVPs — go with that.

Use Your Tools — Let Them Do The Work

You don’t need to manually tap the spacebar like it’s 1999.

Modern editors like:

VS Code
Sublime Text
Atom

…come loaded with auto-indentation and formatting options.

For example, in VS Code:

Go to Settings → Text Editor → Formatting — set up your indent style once, and you’re done.

I’ve had auto-formatting save me literal hours during late-night deployments.

A Few Indentation Best Practices

After years of seeing good, bad, and ugly codebases, here’s what I always recommend:

Stay Consistent. Pick your style and don’t deviate.
Always indent nested elements. Your code will scale beautifully as the project grows.
Block-level elements = indented; inline elements = less important. You don’t need to indent inline stuff unless it’s wrapped inside a block element.
Indent your comments too: If your comment lives inside a <div>, indent it with that <div>. (e.g.<div>  <p>Content here</p> </div>)

The Payoff

You might think this is a small thing. But small things compound.

Clean, well-indented HTML saves you:

time
frustration
debugging headaches
and team arguments

I’ve seen entire projects grind to a halt because the code was such a tangled mess no one wanted to touch it. And I’ve seen teams deliver on time, under budget, simply because they followed clean habits like this from day one.

Honestly, do you reckon your current HTML is as clean as it should be?

Stick to these habits, and your code’s gonna stay clean, organised, and actually pleasant to work with — both for you and anyone else who touches it.

Whether you’re hacking away solo or juggling a big team project, make indentation one of those non-negotiables. It’ll save you a ton of pain down the track.

Call us curious cats...