The Quick Answer
HTML formatting means adding consistent indentation and line breaks to HTML source code so the nesting structure is visible. It does not change how the page renders — browsers ignore whitespace between tags. Formatting is for developers, not for browsers.
The standard approach: indent each child element one level deeper than its parent, using either 2 spaces, 4 spaces, or a tab character per level.
Why HTML Formatting Matters
Readability
Consider this minified HTML:
<div><header><nav><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav></header><main><article><h1>Title</h1><p>Content here.</p></article></main></div>
Now the same markup, formatted:
<div>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Title</h1>
<p>Content here.</p>
</article>
</main>
</div>
The second version makes the document structure obvious. You can immediately see that <nav> is inside <header>, and <article> is inside <main>.
Debugging
When an element isn't styled correctly or a layout breaks, the first thing you check is nesting. Properly indented HTML lets you trace the parent-child hierarchy without counting angle brackets.
Version Control
Formatted HTML produces cleaner diffs in Git. When each element has its own line, changing one attribute or tag shows up as a single-line diff rather than a change to a massive single line.
Collaboration
Teams that agree on a formatting standard spend less time arguing about style and more time building features. Most style guides (Google, Airbnb) specify 2-space indentation for HTML.
HTML Nesting Rules
HTML has specific rules about which elements can contain which. Understanding these prevents bugs that formatters alone cannot catch.
Block vs. Inline Elements
- Block elements (
<div>,<p>,<section>,<article>,<header>,<main>,<footer>,<ul>,<table>) start on a new line and take full width. - Inline elements (
<span>,<a>,<strong>,<em>,<code>,<img>) sit within a line of text.
Key rule: block elements can contain both block and inline elements. Inline elements should only contain other inline elements or text.
<!-- Correct -->
<p>This is <strong>bold</strong> text.</p>
<!-- Wrong: <p> cannot contain <div> -->
<p><div>This breaks the spec.</div></p>
Void (Self-Closing) Elements
These elements cannot have children and do not need a closing tag:
| Element | Purpose |
|---|---|
<br> |
Line break |
<hr> |
Horizontal rule |
<img> |
Image |
<input> |
Form input |
<meta> |
Metadata |
<link> |
External resource link |
<source> |
Media source |
<area> |
Image map area |
<base> |
Base URL |
<col> |
Table column |
<embed> |
Embedded content |
<track> |
Text track for media |
<wbr> |
Word break opportunity |
When formatting, do not increase the indent level after a void element — it has no children to indent.
<!-- Correct formatting -->
<form>
<label for="email">Email</label>
<input type="email" id="email">
<br>
<button type="submit">Send</button>
</form>
Indentation Conventions
2 Spaces (Most Common for HTML)
Used by Google's HTML/CSS style guide, Prettier's default configuration, and most popular frameworks.
<section>
<h2>Heading</h2>
<p>Paragraph text.</p>
</section>
4 Spaces
Common in teams that also work with Python, PHP, or Java, where 4-space indentation is standard.
<section>
<h2>Heading</h2>
<p>Paragraph text.</p>
</section>
Tabs
Some developers prefer tabs because each person can set their editor's tab width independently. This is an accessibility consideration — developers with low vision sometimes prefer wider indentation.
<section>
<h2>Heading</h2>
<p>Paragraph text.</p>
</section>
Which Should You Pick?
Pick what your project already uses. For new projects, 2 spaces is the safest default for HTML because it keeps deeply nested documents manageable. A <table> inside a <section> inside a <main> inside a <body> is already 4 levels deep — at 4 spaces per level, content starts at column 16.
Formatting Best Practices
1. One Element Per Line (Usually)
Place block-level elements on their own lines. Short inline content can stay on the same line as its parent:
<!-- Both are acceptable -->
<li><a href="/about">About</a></li>
<li>
<a href="/about">About</a>
</li>
The single-line version is fine when the content is short and contains only inline elements.
2. Attributes on One Line (When Short)
<!-- Short: keep on one line -->
<input type="email" id="email" required>
<!-- Long: break across lines, aligned or indented -->
<input
type="email"
id="email"
name="user_email"
placeholder="[email protected]"
autocomplete="email"
required
>
3. Consistent Attribute Quoting
Always use double quotes for attribute values. While HTML allows single quotes or even no quotes for simple values, double quotes are the universal convention:
<!-- Preferred -->
<a href="/about" class="nav-link">About</a>
<!-- Valid but inconsistent with convention -->
<a href='/about' class=nav-link>About</a>
4. Blank Lines for Sections
Use blank lines to separate logical sections, similar to paragraphs in prose:
<header>
<h1>Site Title</h1>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>
<p>© 2026</p>
</footer>
Formatting vs. Minifying
| Aspect | Formatted | Minified |
|---|---|---|
| Purpose | Developer readability | Production performance |
| File size | Larger (10–30% more) | Smaller |
| When to use | Development, code review | Deployment |
| Effect on rendering | None | None |
Effect on <pre> content |
Must preserve | Must preserve |
When Minifying Matters Less
If your server uses gzip or brotli compression (most do), whitespace compresses extremely well. The difference between serving formatted vs. minified HTML is often under 1 KB after compression. CSS and JavaScript minification usually have more impact.
Common Formatting Mistakes
1. Mixing Tabs and Spaces
This creates inconsistent indentation that looks different depending on the editor's tab width setting. Most editors have a "convert indentation" command. Use it.
2. Indenting After Void Elements
<!-- Wrong: <br> is void, no children to indent -->
<p>Line one<br>
Line two</p>
<!-- Correct -->
<p>Line one<br>
Line two</p>
3. Adding Whitespace Inside <pre>
The <pre> element preserves whitespace exactly as written. Formatting tools should never touch content inside <pre> tags:
<!-- Formatting must not change this -->
<pre>
function hello() {
console.log("hi");
}
</pre>
4. Inconsistent Inline Element Handling
Putting <span> or <a> on separate lines can insert visible whitespace between words:
<!-- This renders as "Hello World" (with a space before World) -->
<p>
Hello
<strong>World</strong>
</p>
<!-- This renders as "HelloWorld" (no space) only if on same line -->
<p>Hello<strong>World</strong></p>
Keep inline elements in the text flow when spacing matters.
Tools for HTML Formatting
Browser-Based
Our HTML Formatter runs entirely in your browser. Paste HTML, pick your indent size, and get formatted or minified output. No data leaves your device.
Editor Plugins
Most code editors include HTML formatting:
- VS Code — built-in formatter (Shift+Alt+F) or Prettier extension
- Sublime Text — HTML-CSS-JS Prettify package
- Vim —
gg=Gfor basic indentation
Command-Line
- Prettier —
npx prettier --parser html file.html - js-beautify —
npx js-beautify --type html file.html - tidy —
tidy -i -q file.html(the classic HTML formatter)
Build Pipeline
For production, add HTML minification to your build step:
- html-minifier-terser — Node.js-based, highly configurable
- Webpack — html-webpack-plugin with minify option
- Vite — built-in HTML minification in production builds
Frequently Asked Questions
Does whitespace in HTML affect SEO?
No. Search engines parse the DOM, not the raw source. Whether your HTML is formatted or minified has no effect on how search engines index your content. Page load speed (which minification marginally improves) is a minor ranking factor, but the difference from HTML whitespace alone is negligible.
Should I format HTML inside JavaScript template literals?
For short snippets, inline formatting is fine. For larger templates, consider using a template engine or framework that handles formatting separately. Indentation inside template literals can be tricky because the string preserves all whitespace.
What about formatting in frameworks like React or Vue?
React uses JSX, and Vue uses single-file components. Both have their own formatting conventions. Prettier handles JSX and Vue SFC formatting. The HTML indentation principles are the same, but the tooling is different.
How do I enforce consistent formatting across a team?
Use a formatting tool (Prettier is the most popular) with a shared configuration file. Add a pre-commit hook or CI check that fails if files aren't formatted. This removes formatting debates entirely.
Can malformed HTML be formatted?
Partially. Formatters can indent whatever structure they can parse, but they cannot fix invalid nesting or missing tags. If formatting produces unexpected indentation, it often indicates a structural problem in the HTML.
Related Tools
- HTML Formatter — format, beautify, or minify HTML in your browser
- Markdown Preview — preview Markdown rendered as HTML
- JSON Formatter — format and beautify JSON data