HTML formatter and beautifier

Paste HTML and press Format to get clean, consistently indented markup, or Minify to shrink it. The example below is an order email squeezed into five long lines.

Input (713 bytes)

Output

How to format HTML

  1. Paste your HTML into the input editor (or keep the example to see what happens).
  2. Choose the indentation your project uses and where long lines should wrap.
  3. Press Format. Copy or download the result from the output panel.

Examples

  • A squeezed email template. Email builders often export markup on a handful of very long lines. With the example above, Format turns about 700 characters packed into five lines into an indented document where the table rows, the button and the script are each easy to find.
  • Markup copied from the browser. Code taken from dev tools or View Source keeps its original, often inconsistent indentation. One pass with 2 spaces makes a diff against your version readable.
  • Shipping a static page. Minify strips comments and whitespace before you upload a landing page or paste HTML into a CMS field with a length limit. The byte counts above each panel show what you saved.

HTML formatter questions

Is my code sent to a server?

No. Formatting runs in your browser with the open source js-beautify library, and minifying with a small function on this page. Nothing is uploaded or stored.

Does it format the CSS and JavaScript inside the HTML?

Yes. Code inside <style> and <script> tags is indented with the CSS and JavaScript beautifiers from the same library. Inline style attributes are left as they are.

Can formatting break my page?

It only changes whitespace between tags and inside <style> and <script>. Content of <pre> and <textarea> is never touched. Whitespace between inline elements such as two <span> tags can matter, and the formatter keeps those on the same line.

What does Minify remove?

Comments, line breaks and repeated spaces, and the whitespace between block tags. It does not rename anything, drop optional tags or rewrite your CSS and JavaScript, so the page renders exactly as before.

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

None in practice. Both names describe re-indenting markup so every nested element sits on its own line at the right depth. This page does that, and the reverse (minify) with one click.