HTML Formatter

What Is HTML Formatting?

An HTML formatter is a tool that performs HTML formatting (also called beautification or pretty-printing): it adds consistent indentation, line breaks, and spacing to HTML markup so that its nesting structure becomes visible. Browsers ignore whitespace when rendering HTML, so a document written on a single line produces the same output as one with careful indentation. The difference is entirely for humans: formatted HTML is easier to read, debug, and maintain.

The HTML specification (maintained by WHATWG as the HTML Living Standard) defines over 110 elements, each with its own content model. Block-level elements like <div>, <section>, and <article> typically start on a new line and indent their children. Void elements like <br>, <img>, and <input> have no closing tag and no children to indent. A good formatter understands these distinctions and applies indentation rules accordingly, rather than blindly adding whitespace after every tag.

Formatting matters most during development. Minified or machine-generated HTML, output from CMS platforms, and markup copied from browser DevTools often arrive as a single dense line. Without proper indentation, finding a missing closing tag or tracing a deeply nested structure takes significantly longer. An HTML formatter turns that wall of text into a properly indented, readable tree structure in one step.

Why Use This HTML Formatter?

Paste any HTML and get properly indented output instantly. No plugins to install, no configuration files to write, no accounts to create.

HTML Formatter Use Cases

HTML Indentation Rules

How an HTML formatter treats each element type depends on its content model. The table below shows common elements and how they are indented with 2-space and 4-space settings. Both produce identical rendering in the browser; the difference is readability.

Formatter vs. Minifier vs. Linter

These three tools operate on HTML but serve different purposes. Formatting and minification are opposite transformations; linting checks for errors without changing whitespace.

Code Examples

How to format HTML programmatically in popular languages and tools:

import { html as beautify } from 'js-beautify'

const ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

const formatted = beautify(ugly, {
  indent_size: 2,
  indent_char: ' ',
  wrap_line_length: 80,
  preserve_newlines: false,
})
// → <div>
// →   <p>Hello</p>
// →   <ul>
// →     <li>One</li>
// →     <li>Two</li>
// →   </ul>
// → </div>

from bs4 import BeautifulSoup

ugly = '<div><p>Hello</p><ul><li>One</li><li>Two</li></ul></div>'

soup = BeautifulSoup(ugly, 'html.parser')
print(soup.prettify(formatter='minimal'))
# → <div>
# →  <p>
# →   Hello
# →  </p>
# →  <ul>
# →   <li>One</li>
# →   <li>Two</li>
# →  </ul>
# → </div>

package main

import (
    "bytes"
    "fmt"
    "golang.org/x/net/html"
    "strings"
)

func main() {
    ugly := "<div><p>Hello</p></div>"
    doc, _ := html.Parse(strings.NewReader(ugly))

    var buf bytes.Buffer
    html.Render(&buf, doc)
    fmt.Println(buf.String())
    // renders normalized HTML — pair with indent logic for pretty output
}

# Format a single file in place
npx prettier --write index.html

# Format and print to stdout (pipe-friendly)
npx prettier --parser html index.html

# Format with 4-space indentation
npx prettier --tab-width 4 --parser html index.html

# Format HTML from stdin
echo '<div><p>Hello</p></div>' | npx prettier --parser html

Frequently Asked Questions