DevSwitch.net
Sign in
Back to Tools
{ }

HTML Beautifier

Format and beautify HTML code for better readability

Code Tools

Tip: Paste your minified or messy HTML code and click Beautify to format it with proper indentation and line breaks.

Runs in your browser

Input HTML Code

Format HTML with clean indentation

Paste a page, a template or a fragment, or open an .html file, and press Beautify Code. The HTML beautifier puts block elements on their own lines and indents each child 2 spaces deeper than its parent, inside <head> and <body> too.

HTML formatter, HTML beautifier or HTML prettify: the names differ, the job is the same. Formatting is done by js-beautify 1.14.11. Lines are never wrapped, however long, and tags, attributes and text stay as you wrote them.

HTML beautifier example

A minified page, formatted with the settings this page uses:

pricing.min.html 
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Pricing</title></head><body><nav><a href="/">Home</a> | <a href="/pricing">Pricing</a></nav><main><h1>Plans</h1><ul><li><b>Starter</b> $5 a month</li><li><b>Team</b> $20 a month</li></ul><!-- TODO: add FAQ --></main></body></html>
pricing.html 
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Pricing</title>
  </head>

  <body>
    <nav><a href="/">Home</a> | <a href="/pricing">Pricing</a></nav>
    <main>
      <h1>Plans</h1>
      <ul>
        <li><b>Starter</b> $5 a month</li>
        <li><b>Team</b> $20 a month</li>
      </ul><!-- TODO: add FAQ -->
    </main>
  </body>

</html>

The links in <nav> and the <b> tags stayed in their line of text, and the comment was kept. A blank line is added before <head>, <body> and </html> to separate the main parts of the page.

How each kind of element is laid out

  • Block elements

    <div>, <ul>, <li>, <table> and headings normally start a new line, and their children are indented one level deeper.

  • Inline elements

    <a>, <b>, <span>, <img>, <input> and comments stay on the line of the text around them, so no new gaps appear in a sentence.

  • Preformatted text

    The content of <pre> and <textarea> is kept exactly, spaces and line breaks included, and <code> is not reformatted either.

  • Scripts and styles

    The code inside <script> and <style> blocks is formatted too, by the same rules as the JavaScript beautifier and the CSS beautifier.

Details to check after formatting

  • Check

    Menus built from inline-block <li> items

    Why

    Each <li> gets its own line. If the items are styled as inline-block, the line break between them shows as a small gap. Remove the gap with flexbox or grid in your CSS, or keep those items on one line.

  • Check

    A <pre> that starts right after a closing tag

    Why

    Because its content must not change, it stays attached to the tag before it, as in </ul><pre>. It looks odd but renders the same.

  • Check

    Indentation that drifts to the right

    Why

    A closing tag is missing. The beautifier doesn't add missing tags, so the indentation follows the tags as written and shows where one was left open.

Ready to ship the page?

The HTML minifier removes the indentation and comments again, without changing how the page looks.

HTML beautifier questions

Almost never. New line breaks go only between block elements, where browsers ignore whitespace, and inline elements stay on their line. The exception is block elements styled as inline-block, described above.

No. Unclosed tags stay unclosed and nothing is validated. The indentation does make a missing </div> easy to find.

No. A component, a snippet or an email template is formatted the same way; <html> and <body> are only indented when they are there.

No. Formatting runs in your browser.