HTML Formatter

Clean up messy or minified HTML with consistent indentation, one element per line, and tidy attributes. Inline scripts and styles are formatted too.

Updated
Runs in your browser. Your data is not uploaded.
Formats as you type for inputs up to 200 KB.

How to use the HTML Formatter

  1. Paste HTML into Code input, or upload or drop an .html file.
  2. Set the Indent and, if you want long lines broken up, Wrap lines at 80 or 120 characters.
  3. Press Format, then copy the result or download it.

How it works

The HTML is re-indented by js-beautify, a formatter used in many code editors. It reads the markup as tokens, so it works on fragments and on HTML with small mistakes.

  • Block elements such as <div>, <ul>, and <section> start new lines and indent their children.
  • Inline elements such as <a>, <strong>, and <span> stay in the flow of the text, so no visible spaces are added.
  • The contents of <script> and <style> are formatted as JavaScript and CSS.
  • <pre>, <textarea>, and comments are copied as they are, because whitespace in them is visible.

Examples

Input:

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

Formatted with 2 spaces:

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

Limitations

  • The formatter changes layout, not markup. It doesn't close missing tags or report errors; use the XML Validator if you need strict XHTML checks.
  • Template syntax such as Blade, Twig, Handlebars, or JSX is mostly kept, but complex template logic may be indented oddly.
  • Whitespace between inline elements can matter in rare layouts. Check the page after formatting.
  • Files are limited to 5 MB.

Frequently asked questions

Will formatting change how my page looks?

Almost never. Only whitespace between tags changes, and browsers collapse that whitespace. Content inside <pre> and <textarea> is never touched.

Can it minify HTML?

No, this tool only beautifies. To shrink the CSS and JavaScript of a page, use the CSS Minifier and the JavaScript Minifier.

Does it fix broken HTML?

No. It re-indents what is there. Unclosed tags stay unclosed, although the indentation often makes them easy to spot.

Is my code uploaded?

No. Formatting runs in your browser.

Often used together with the HTML Formatter.

  • CSS Formatter

    Beautifies CSS with one declaration per line and consistent indentation.

  • JavaScript Formatter

    Beautifies minified or messy JavaScript with your chosen indent and brace style.

  • XML Formatter

    Beautifies XML with clean indentation or minifies it to one line.