HTML Beautifier and Formatter

Paste minified or messy HTML and get clean, indented markup that still renders the same. Your code stays in your browser.

Paste your HTML

Indent

Wrap lines at

Indent head and body Format script and style code

HTML input

Beautified HTML

Loading the formatter (about 140 KB, downloaded once)...

How to beautify HTML with this tool

Paste your markup into HTML input, or click Open file to load an .html file. The page opens with a one-line example so a result shows straight away.
Pick Indent (2 spaces, 4 spaces or tab) and Wrap lines at (Off, 80, 100 or 120 characters).
Keep Indent head and body ticked to nest everything under <html>. Keep Format script and style code ticked to tidy the JavaScript and CSS inside <script> and <style>, or clear it to leave that code as written.
Read the result in Beautified HTML, then use Copy or Download.

How the formatting works

Formatting is done by the open source js-beautify library (version 2.0.3, MIT licence), which runs in your browser. Block elements such as div, p, ul, li and table go on their own lines, and each level of nesting is indented. Inline elements such as a, span, strong, em, code and img stay on the line they were written on, because a browser draws the space between inline elements as a visible gap, so moving them would change the page. The content of pre and textarea is never touched, and void elements such as br and meta do not add an indent level.

Worked example

With the default settings (2 spaces, wrapping off, both boxes ticked) the example input

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Example</title><style>body{margin:0}.card{padding:16px}</style></head><body><div class="card"><h1>Hello</h1><p>Visit <a href="/docs">our docs</a>. Price: <strong>$9</strong>.</p><ul><li>One</li><li>Two</li></ul><pre>line1
  indented</pre></div><script>console.log("hi")</script></body></html>

becomes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <style>
      body {
        margin: 0
      }

      .card {
        padding: 16px
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h1>Hello</h1>
      <p>Visit <a href="/docs">our docs</a>. Price: <strong>$9</strong>.</p>
      <ul>
        <li>One</li>
        <li>Two</li>
      </ul>
      <pre>line1
  indented</pre>
    </div>
    <script>
      console.log("hi")
    </script>
  </body>
</html>

The status line reads "Formatted: 31 lines, 523 characters.". The pre block keeps its two-space line exactly, while the style and script contents are indented as code.

Limits and edge cases

The tool formats, it does not validate. Mistakes such as missing closing tags are carried through as written, and nothing is dropped: an unfinished tag at the end of the input appears at the end of the output. The W3C Markup Validator lists errors.
An element other than pre or textarea that your CSS styles with white-space: pre can render differently, because the tool cannot read your stylesheet.
Template tags from Jinja, Handlebars, PHP or ERB are treated as plain text, so check a template file before you save over it.
Files up to 5 MB open with Open file. Above about 500,000 characters, click Beautify instead of waiting for live formatting.
The first use downloads about 140 KB of formatter code from cdnjs. Your HTML is never sent anywhere.

Frequently asked questions

Will beautifying HTML change how my page looks?

Not in normal cases. Only the whitespace between tags changes, inline elements keep their line, and pre and textarea blocks are untouched. The exception is an element that your CSS styles with white-space: pre or pre-wrap. Compare the page before and after if that applies to you.

What is the difference between an HTML beautifier and an HTML minifier?

A beautifier adds line breaks and indentation so people can read the markup. A minifier removes them so the file downloads faster. Beautify a minified page to study it, then minify your own copy again before you publish.

Can it fix broken HTML or add missing closing tags?

No. It only changes whitespace and line breaks, so an unclosed or wrongly nested tag stays as it was, often easier to spot once the code is indented. Use a validator to list the errors.

How do I stop long paragraphs from running off the screen?

Set Wrap lines at to 80, 100 or 120 characters. Text and inline elements then break onto the next line at that limit.

Need the opposite or another format? The HTML minifier shrinks a page again, the CSS beautifier and JavaScript beautifier format standalone files, and the diff checker compares two versions.

Sources: js-beautify 2.0.3 (github.com/beautifier/js-beautify); MDN, How whitespace is handled by HTML, CSS, and in the DOM; HTML Living Standard, void elements.