Last updated
Why Format HTML?
Minified or poorly indented HTML is hard to read and debug. A formatter normalizes indentation, adds line breaks between elements, and makes the structure of the document immediately visible. This is especially useful when working with HTML generated by templating engines, copied from browser DevTools, or exported from CMS systems.
HTML Formatting Rules
- Indentation: Child elements are indented relative to their parent. Standard is 2 or 4 spaces (never tabs in HTML).
- Inline vs block elements: Block elements (
div,p,section) get their own lines. Inline elements (span,a,strong) stay on the same line as their content. - Void elements: Self-closing elements (
img,br,input,meta) don't need a closing tag in HTML5. - Attribute formatting: Long attribute lists can be broken across lines for readability.
HTML5 Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<h1>Main Heading</h1>
<p>Content goes here.</p>
</main>
<footer>
<p>© 2026 My Site</p>
</footer>
<script src="app.js"></script>
</body>
</html>Formatting Tools
For automated HTML formatting in your workflow, use Prettier — it supports HTML,
CSS, JavaScript, and many other formats with a single configuration file.
Add it to your project with npm install -D prettier and run
npx prettier --write "**/*.html".
VS Code's built-in formatter also handles HTML well via the "Format Document" command.