HTML Formatter & Beautifier

Updated October 18, 2026Free mock REST & WebSocket APIs

Paste minified or messy HTML and get it cleanly indented, one block element per line, with short inline content kept together. Unclosed and stray tags are flagged so you can fix them.

Inline up to

HTML

Paste, type, or drop a file onto the box.

Formatted HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>MockFox   demo</title>
    <style>
      .card { padding : 16px ; border : 1px solid #ddd ; } /* card */
    </style>
  </head>
  <body>
    <!-- main layout -->
    <header class="site">
      <nav>
        <ul>
          <li><a href="/">Home</a>
          <li><a href="/tools">Tools</a>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Hello, <em>world</em>!</h1>
      <p>This paragraph has messy spacing and a <a href="/docs" title="Read the docs">link</a>.</p>
      <form>
        <label>Email <input type="email" name="email" required="required"></label><button type="submit" disabled="disabled">Send</button>
      </form>
      <pre>
  preformatted   text
    stays exactly as written
</pre>
      <script>
        document.querySelector("h1").addEventListener("click", () => {
          console.log("hi");
        });
      </script>
    </main>
  </body>
</html>

🔒 Runs in your browser — nothing you paste is uploaded.

How to format HTML

Paste HTML or drop an .html file onto the input.
Choose 2 spaces, 4 spaces or tabs, and how long a line of inline content may get before it's split.
Read any markup warnings, then copy or download the formatted HTML.

What the formatter does — and leaves alone

Block elements (div, section, ul, li, table, p…) start on their own line, indented one level per nesting depth.
Inline content (text, a, strong, em, code, span…) stays on one line with its parent when it fits, so sentences aren't broken apart.
<pre> and <textarea> are copied exactly — their whitespace is visible on the page.
<script> and <style> are re-indented as a block but their code isn't rewritten.
Optional end tags such as a missing </li> or </p> are valid HTML and kept as written; truly unclosed elements get a warning.

Does whitespace in HTML matter?

Mostly not: browsers collapse runs of spaces and line breaks into one space. But between inline elements a single space is visible — <b>a</b> <b>b</b> renders “a b” while <b>a</b><b>b</b> renders “ab”. The formatter keeps those spaces and only adds line breaks between block-level elements, where they don't change the layout.

Related tools

Frequently asked questions

Is my HTML uploaded anywhere?

No. The conversion runs entirely in your browser with JavaScript, so your HTML never leaves your device and isn't logged or stored.

Will formatting change how my page looks?

No in practically all cases: line breaks are only added around block-level elements, and pre/textarea content is untouched. Inline elements styled as display:inline-block can shift by one space's width if they were written with no whitespace between them.

Does it fix broken HTML?

It points out unclosed and stray tags with line numbers and drops stray closing tags, but it doesn't guess your intent — fix the warnings in your source.

Can it format JSX, Vue or Svelte templates?

Simple templates work, but expressions in braces and framework-specific syntax aren't understood. Use Prettier in your editor for component files.

Your business here? Sponsor this tool from $16/week. See placements