HTML Formatter

Runs entirely in your browser

Beautify and indent HTML directly in your browser, based on tag nesting.

Advertisement

Advertisement

What is HTML Formatter?

HTML Formatter re-indents an HTML document so each nested element sits on its own line, making structure easy to scan. It's a text-based indenter, not a validator or parser — it won't fix broken markup, only make well-formed markup readable.

How to use HTML Formatter

  1. Paste your HTML into the Input box.
  2. Choose an indent size.
  3. Click Format, then copy the result.

Features

  • Indents nested elements based on tag structure.
  • Leaves <script>, <style>, <pre> and <textarea> contents untouched.
  • Correctly handles void elements like <br> and <img>.
  • 100% client-side — your markup never leaves your browser.

Example

This compact markup:

<div class="card"><h2>Title</h2><p>Some <strong>text</strong>.</p><img src="a.png"></div>

becomes:

<div class="card">
  <h2>
    Title
  </h2>
  <p>
    Some
    <strong>
      text
    </strong>
    .
  </p>
  <img src="a.png">
</div>

Tips for using HTML Formatter

  • Every distinct run of text becomes its own line — notice in the Example above that the trailing period after </strong> lands on its own line too. This is normal: the formatter tracks structure, not prose, so sentence-heavy HTML can end up with more lines than you might expect.
  • Void elements are recognized from a fixed list (br, img, hr, input and others) plus any tag written with a self-closing />, so indentation depth won't drift even if a void element appears without one.
  • Tag matching relies on a regular expression rather than a full HTML5 parsing algorithm, so unusual cases — like an unquoted attribute value containing a literal > — can occasionally confuse it. Always spot-check unusual markup before relying on the output.
  • Content inside a raw-text element is captured as one block and only trimmed at the edges, so pre-existing internal formatting inside a large inline <script> or <style> block is preserved rather than being re-indented to match the surrounding HTML.

Is HTML Formatter safe?

Yes. The regex-based tag matcher described in the Tips above runs locally in your browser and leaves script, style, pre and textarea contents untouched — the markup you paste is re-indented and displayed without ever being uploaded to our servers.

Frequently Asked Questions

Does this reformat script and style contents?

No. Content inside <script>, <style>, <pre> and <textarea> is left exactly as-is, since reformatting it could change behavior or displayed whitespace.

Does this fix invalid or unclosed HTML?

No. This is a text-based formatter, not a validator — it indents tags based on nesting but doesn't repair mismatched or unclosed tags.

Are attributes reformatted?

No. Attributes stay exactly as written on the same line as their tag — only tag nesting is indented.

Related tools