HTML Formatter

What an HTML formatter is for

HTML often arrives in a state that is hard to read. A CMS export puts a whole page on one line. A template engine leaves odd gaps. Copying from the browser’s view source gives you whatever the server sent. An HTML formatter rebuilds the indentation so each nested element sits one level deeper than its parent, and you can see the structure of the page at a glance.

This page uses Prettier 3 in your browser. Besides the markup, it also formats CSS inside style tags and JavaScript inside script tags, so a full page comes out tidy in one pass.

How to use it

1. Paste your HTML into the left box. Formatting starts as soon as you paste.
2. Or press Open file to load an .html file, or Sample to try an example.
3. Choose the Indent: 2 spaces, 4 spaces or Tabs.
4. Set the Line width. Lines with many attributes or long text wrap at this width.
5. Pick a Whitespace mode: Respect CSS display, Ignore or Strict. The default is the safe one.
6. Press Format or Ctrl+Enter. Press Minify for the compact version.
7. Press Copy, or Download to save an .html file.

Once the formatter has run, it updates the output while you type. If a script or style block inside the page has a syntax error, that block is left as you wrote it and the rest of the page is still formatted. To find the error, paste the script into the JavaScript formatter, which reports the line and column.

Before and after

One line of HTML:

<!DOCTYPE html><html><head><title>Shop</title></head><body><nav><a href="/">Home</a><a href="/cart">Cart</a></nav><main><h1>Welcome</h1><p>Pick a <b>product</b> to start.</p><ul><li>Tea</li><li>Coffee</li></ul></main></body></html>

After Format with 2 spaces:

<!DOCTYPE html>
<html>
  <head>
    <title>Shop</title>
  </head>
  <body>
    <nav><a href="/">Home</a><a href="/cart">Cart</a></nav>
    <main>
      <h1>Welcome</h1>
      <p>Pick a <b>product</b> to start.</p>
      <ul>
        <li>Tea</li>
        <li>Coffee</li>
      </ul>
    </main>
  </body>
</html>

The two links in the nav stay on one line. There is no space between them in the source, and adding a line break would put a visible gap between them. That is the Respect CSS display mode at work.

Inline blocks are formatted with their own rules:

<style>
  body {
    margin: 0;
  }
</style>
<script>
  const a = 1;
  console.log(a);
</script>

The Whitespace option

In HTML, a line break between two inline elements renders as a space. That is why formatters must be careful. Here is the same paragraph at a line width of 40.

With Respect CSS display:

<p>
  Read the <a href="/terms">terms</a>,
  then press <button>Accept</button>.
</p>

With Ignore:

<p>
  Read the
  <a href="/terms">terms</a>
  , then press
  <button>Accept</button>
  .
</p>

The second version looks tidy, but the browser now shows a space before the comma and before the full stop. Use Ignore only for markup where that does not matter, such as email templates you check by eye, or XML-like HTML with no inline text.

Minifying HTML

Minify shrinks the page without changing what it shows. For this input:

<div class="card">
  <!-- price -->
  <p>
    Only   <b>$5</b>   today
  </p>
</div>

the result is:

<div class="card"><p>Only <b>$5</b> today</p></div>

Comments are removed, repeated spaces become one, and spaces next to block elements like div and p go. Spaces between inline words stay, because removing them would join words together. Content in pre, textarea and script is left alone, and CSS in style tags is minified with the same safe rules as the CSS formatter.

Limits

• HTML is forgiving, so a missing closing tag is often not an error. The input <div><p>Hello</div> comes back as <div><p>Hello</p></div>, with the paragraph closed for you. Watch the output to spot tags you forgot.
• Formatting does not validate attributes, check accessibility or fix invalid nesting. Use the W3C validator for that.
• Template syntax such as Handlebars or Jinja can confuse the parser. Format the rendered HTML, or use a formatter made for that template language.

Other ways to format HTML

• VS Code has a built in HTML formatter. Run Format Document (Shift+Alt+F on Windows, Shift+Option+F on macOS). The Prettier extension gives output that matches this page.
• Command line: npx prettier --write index.html.
• Browser developer tools show a formatted DOM tree in the Elements panel, but that is the live page after scripts ran, not your source.

If you need the content of a page as Markdown rather than HTML, the HTML to Markdown converter does that. For scripts outside the page, use the JavaScript formatter.