Does formatting change how my page works?

No. The formatter only changes indentation and line breaks between tags. Content inside and is left exactly as it is, because whitespace matters there.

Can it unminify HTML?

Yes. Paste minified HTML that is all on one line and the formatter splits it into indented lines. Inline and blocks are formatted too.

Should I indent with spaces or tabs?

Either is fine; follow your project's style. Two spaces is the most common choice for HTML. You can switch between 2 spaces, 4 spaces and tabs and the output updates instantly.

What does “one attribute per line” do?

Elements with several attributes are split so every attribute is on its own, aligned line. This makes long tags, such as inputs or SVG elements, much easier to review in code diffs.

No. Formatting runs entirely in your browser; nothing you paste leaves your device.

HTML Formatter & Beautifier

Turn messy or minified HTML into clean, consistently indented code.

Your HTML

1 lines

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Pricing</title><style>.plan{padding:16px;border:1px solid #ddd}</style></head><body><header><nav><a href="/">Home</a><a href="/pricing" class="active">Pricing</a></nav></header><main><h1>Plans</h1><div class="plan"><h2>Starter</h2><p>For <strong>small</strong> projects.</p><ul><li>1 site</li><li>Email support</li></ul><button type="button" data-plan="starter" aria-label="Choose the Starter plan">Choose</button></div></main><script>document.querySelectorAll("button").forEach(function(b){b.addEventListener("click",function(){alert(b.dataset.plan)})})</script></body></html>

Formatted HTML

37 lines

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pricing</title>
  <style>
    .plan {
      padding: 16px;
      border: 1px solid #ddd
    }
  </style>
</head>
<body>
  <header>
    <nav><a href="/">Home</a><a href="/pricing" class="active">Pricing</a></nav>
  </header>
  <main>
    <h1>Plans</h1>
    <div class="plan">
      <h2>Starter</h2>
      <p>For <strong>small</strong> projects.</p>
      <ul>
        <li>1 site</li>
        <li>Email support</li>
      </ul><button type="button" data-plan="starter" aria-label="Choose the Starter plan">Choose</button>
    </div>
  </main>
  <script>
    document.querySelectorAll("button").forEach(function(b) {
      b.addEventListener("click", function() {
        alert(b.dataset.plan)
      })
    })
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pricing</title>
  <style>
    .plan {
      padding: 16px;
      border: 1px solid #ddd
    }
  </style>
</head>
<body>
  <header>
    <nav><a href="/">Home</a><a href="/pricing" class="active">Pricing</a></nav>
  </header>
  <main>
    <h1>Plans</h1>
    <div class="plan">
      <h2>Starter</h2>
      <p>For <strong>small</strong> projects.</p>
      <ul>
        <li>1 site</li>
        <li>Email support</li>
      </ul><button type="button" data-plan="starter" aria-label="Choose the Starter plan">Choose</button>
    </div>
  </main>
  <script>
    document.querySelectorAll("button").forEach(function(b) {
      b.addEventListener("click", function() {
        alert(b.dataset.plan)
      })
    })
  </script>
</body>
</html>

How to format HTML

Paste your HTML on the left, or open or drop an .html file.
The beautified HTML appears on the right. Pick 2 spaces, 4 spaces or Tab indentation and how long lines and attributes should wrap.
Press Copy or Download to take the formatted code back to your project.

Beautify messy or minified HTML

HTML often arrives unreadable: minified production pages, markup generated by a CMS or page builder, or code pasted from several sources with mixed indentation. The formatter rebuilds the indentation from the document's structure so every nested element is easy to follow. It also formats the CSS and JavaScript inside <style> and <script> tags.

Before

<ul><li><a href="/">Home</a></li><li><a href="/blog">Blog</a></li></ul>

After formatting

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/blog">Blog</a></li>
</ul>

Only whitespace between tags changes. Text inside <pre> and <textarea> is left untouched, and inline elements like <a> and <strong> stay on the same line as their text.

Formatting options

Indent: 2 spaces, 4 spaces or tabs.
Attributes: keep them on one line, put each on its own line, or preserve your existing wrapping.
Wrap at: no wrapping, 80 or 120 characters.
Indent <head> and <body>: choose whether the page's top-level sections are indented.

When to use an HTML beautifier

Reading or debugging the minified HTML of a live website.
Cleaning up exported HTML from email builders, CMSs and site builders.
Making code reviews easier by giving a file consistent indentation.

Related HTML tools

Formatting shows the structure, but it doesn't fix broken markup — check it with the HTML validator. Going the other way for production? The HTML minifier strips the whitespace again. To see the result rendered, paste it into the HTML viewer, and for JSON data use the JSON editor.

Frequently asked questions

Does formatting change how my page works?: No. The formatter only changes indentation and line breaks between tags. Content inside <pre> and <textarea> is left exactly as it is, because whitespace matters there.
Can it unminify HTML?: Yes. Paste minified HTML that is all on one line and the formatter splits it into indented lines. Inline <style> and <script> blocks are formatted too.
Should I indent with spaces or tabs?: Either is fine; follow your project's style. Two spaces is the most common choice for HTML. You can switch between 2 spaces, 4 spaces and tabs and the output updates instantly.
What does “one attribute per line” do?: Elements with several attributes are split so every attribute is on its own, aligned line. This makes long tags, such as inputs or SVG elements, much easier to review in code diffs.
Is my HTML uploaded?: No. Formatting runs entirely in your browser; nothing you paste leaves your device.