Beautify HTML Online: HTML Formatter

The Formatted Output

The formatter applied to the input above produces:

<div class="container">
  <header class="header">
    <nav>
      <a href="/" class="logo">DevBento</a>
      <ul class="nav-list">
        <li><a href="/tools">Tools</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="hero">
      <h1>Developer Tools</h1>
      <p>Free, privacy-first tools that run in your browser.</p>
      <a href="/tools" class="cta-button">Get Started</a>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 DevBento</p>
  </footer>
</div>

The nesting structure is immediately visible. The header, main, and footer regions are distinct. Each li stays on one line because its content is a single inline element.

HTML Formatting Rules

HTML formatting follows a small set of rules that most tools agree on:

Block elements (div, section, header, main, footer, ul, ol, li, p, h1 through h6, table, form) get their own lines. Each child is indented one level relative to its parent.

Inline elements (a, span, strong, em, code, img) are kept on the same line as their surrounding content when possible. A li containing only a single a tag stays as a one-liner. A p with mixed text and inline elements stays on one line.

Void elements (br, hr, img, input, meta, link) do not get closing tags. The formatter preserves whatever convention is already in the file unless you configure it to normalize.

Attributes stay on the same line as the opening tag unless the tag has enough attributes that a line length limit triggers attribute wrapping. When attributes wrap, each attribute goes on its own line indented under the tag name, with the closing > on its own line.

When HTML Formatting Matters

Unformatted HTML causes real problems in a few specific situations:

Template files in version control. HTML templates for static sites, email, and server-rendered apps are edited by multiple people over time. Unformatted templates produce diffs where a single content change touches an entire minified line. Formatted templates produce diffs that show exactly what changed.

Email HTML. Email HTML is often written by hand to work around the limitations of email clients, which support only a subset of CSS and have inconsistent behavior. Developers frequently receive email HTML as a single minified string from a designer or a third-party tool. Formatting it is the first step before editing, because email HTML nests tables several levels deep and is unreadable without indentation.

Static site generators. Projects using Eleventy, Hugo, Jekyll, or Astro commit their template files to version control. Formatted templates are dramatically easier to review and edit than generated or copy-pasted HTML.

Debugging rendered output. When a server-side rendering bug produces malformed HTML, formatting the raw response is the fastest way to find unclosed tags, unexpected nesting, or missing elements. Use your browser’s “View Page Source” and format it here to see the actual tree structure.

Formatting in Component Frameworks

React JSX and Vue single-file components use syntax that looks like HTML but is not. Paste JSX into an HTML formatter and it will either error on className, break on self-closing <div />, or strip expression containers like {user.name}.

For JSX and TSX files, Prettier is the correct tool. Install it once per project:

npm install prettier --save-dev

npx prettier --write src/components/MyComponent.tsx

Prettier handles JSX indentation, attribute wrapping, and self-closing tags according to the same rules it applies to JavaScript, keeping the formatting consistent across your entire codebase.

For Vue .vue files, Prettier with @prettier/plugin-vue formats the template, script, and style blocks independently according to their respective parsers.

Prettier Integration for HTML

For .html files in a project, Prettier handles formatting via its HTML parser:

npx prettier --write "**/*.html"

The default Prettier configuration for HTML uses 2-space indentation and a print width of 80 characters. Attributes wrap when a tag exceeds 80 characters. This is configurable in .prettierrc:

{
  "htmlWhitespaceSensitivity": "css",
  "printWidth": 100,
  "tabWidth": 2
}

The htmlWhitespaceSensitivity option controls how Prettier handles whitespace around inline elements. The css value (the default) respects the element’s display property, which matches browser behavior. Use strict if you need to preserve whitespace around every inline element, or ignore if you want consistent formatting regardless of display type.

For integrating HTML formatting into a pre-commit workflow, combine Prettier with lint-staged so that HTML files are formatted automatically on every commit without requiring developers to run the formatter manually. This is the most reliable way to maintain consistent formatting across a team.

The diff checker is useful for comparing the original and beautified HTML to verify that no content was accidentally changed during formatting.