Skip to content
koducathome

HTML Formatter

Beautify messy or minified HTML with consistent indentation, including inline CSS and JavaScript.

How to use this tool

Steps for using the HTML Formatter.

  1. Paste minified or messy HTML into the Input HTML panel, or click Sample to load an example page.
  2. Choose the indentation (2 spaces, 4 spaces or tabs) and, if you want long lines broken up, a wrap length of 80 or 120 characters.
  3. Decide whether to keep blank lines, indent the contents of <head> and <body>, and re-indent embedded <style> and <script> blocks.
  4. Click Format to beautify the markup, or Minify to collapse whitespace and strip comments.
  5. Copy the result or Download it as an .html file.

Example

Indent a one-line navigation menu

Minified HTML
<nav><ul><li><a href="/">Home</a></li><li><a href="/docs/">Docs</a></li></ul></nav>
Formatted HTML (2 spaces)
<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/docs/">Docs</a></li>
  </ul>
</nav>

Common use cases

  • Reading minified HTML copied from a production page or the browser's “View source”.
  • Cleaning up markup exported by CMSs, email builders or WYSIWYG editors before editing it by hand.
  • Normalising indentation in templates before a code review.
  • Inspecting HTML snippets returned by an API or scraper.
  • Shrinking a static HTML page or email template without risking layout changes.

How HTML formatting works

Formatting is done by js-beautify, the same library behind many editor plugins. It walks through the markup tag by tag, puts block-level elements such as <div>, <ul> and <section> on their own lines and indents their children, while keeping inline elements like <a>, <b> and <em> within the surrounding text so that the rendered spacing does not change.

Embedded code is formatted too: the contents of <style> are passed through js-beautify's CSS formatter and <script> through its JavaScript formatter, then re-indented to sit under their tag. Turn off Format <style> and <script> to leave those blocks byte-for-byte as they are. <pre> and <textarea> contents are never reformatted, because whitespace inside them is visible.

The beautifier is not a validator. It does not check that tags are closed, nested correctly or allowed where they appear — it simply re-indents whatever it is given, so unclosed or misnested tags come out indented but still broken. If the structure looks odd after formatting, that is often a clue that the source markup has an error.

Minify is deliberately conservative. It removes comments (but keeps Internet Explorer conditional comments), collapses runs of whitespace in text to a single space and drops whitespace-only text next to block-level elements. It does not remove optional tags, shorten attributes or touch <pre>, <textarea>, <script> or <style> contents, so the page renders the same. For bigger savings, minify CSS and JavaScript separately with the CSS Minifier and JavaScript Minifier.

Limitations

  • Does not validate HTML — unclosed or misnested tags are re-indented as written.
  • Template syntax (Handlebars, Jinja, JSX) is not understood and may be formatted unpredictably.
  • Minify only removes whitespace and comments; it does not rewrite attributes, remove optional tags or minify inline CSS/JS.
  • Input is limited to 2 million characters.

Frequently asked questions

Does formatting change how my page renders?

It should not in normal documents: inline elements stay inline and <pre>/<textarea> content is preserved. Whitespace between inline-block elements can matter in rare layouts, so check those visually.

Will it fix broken HTML?

No. The formatter only changes indentation and line breaks. It does not add missing closing tags or reorder elements; use the W3C validator or your browser's DevTools to find structural errors.

What does “Indent <head> and <body>” do?

By default <head> and <body> start at the same level as <html>, which is a common convention. Enable the option to indent them one level inside <html> instead.

Can I format XML or SVG here?

Simple SVG works, but for XML documents use the XML Formatter, which validates well-formedness and preserves CDATA and processing instructions.

Is my HTML uploaded?

No. Formatting and minifying run entirely in your browser.