Skip to content
en
All tools

Categories

Developer ToolsEncoding & DecodingJSON & DataHash & ChecksumText ToolsDate & TimeNetwork ToolsFile ToolsMarkdown & Diagrams

HTML Formatter

Paste minified or messy HTML and get clean, consistently indented markup you can read and diff.

Processed locally in your browser

Options
0 chars · 0 lines
The result will appear here.

What is HTML Formatter?

HTML from build tools, CMS editors or "view source" is often a single long line or unevenly indented. A formatter re-lays the markup out with one nesting level per indent, so the structure of the document becomes visible.

This tool uses the js-beautify HTML beautifier. You can choose 2, 4 or 8 spaces or tabs, wrap long lines at a chosen width, put one attribute per line, indent the head and body, and keep or drop existing blank lines. Inline elements such as <a> and <strong> stay inline, so the text flow is not altered.

How does it work?

  1. Paste your HTML into the input box; the formatted result appears as you type.
  2. Select the indentation (spaces or tabs) and the wrap width, where 0 disables wrapping.
  3. Turn on one attribute per line if your tags carry many attributes, and choose whether to keep blank lines.
  4. Copy or download the formatted HTML.

Common use cases

  • Reading a minified page or an e-mail template to find a missing closing tag.
  • Normalizing indentation before committing HTML to version control.
  • Making a component’s output diff-friendly when comparing two versions.
  • Preparing a snippet for documentation or a bug report.

Examples

Try this input in the tool above:

Input
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo</title></head><body><nav class="menu"><ul><li><a href="/">Home</a></li><li><a href="/about">About</a></li></ul></nav><main><h1>Hello</h1><p>This is a <strong>sample</strong> page with <em>inline</em> text.</p></main></body></html>
Output
<!DOCTYPE html>
<html>

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

  <body>
    <nav class="menu">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
    <main>
      <h1>Hello</h1>
      <p>This is a <strong>sample</strong> page with <em>inline</em> text.</p>
    </main>
  </body>

</html>

Privacy

HTML Formatter runs entirely in your browser. The text or files you provide are processed on your device and are not uploaded, logged or stored on our servers.

Limitations

The beautifier does not validate HTML or fix errors such as unclosed tags, and whitespace changes can be significant inside <pre> or inline text, so review the result before publishing.

Frequently asked questions

Does formatting change how the page renders?

It only changes whitespace between tags. Inline elements are kept inline and <pre> content is preserved, but adding line breaks can alter the spacing of text in unusual layouts.

What does the wrap option do?

Lines longer than the width are broken at spaces. Setting it to 0 keeps each line as long as the source, which is useful for long attribute values.

Is my HTML sent to a server?

No. The beautifier is loaded in your browser and runs locally, so your markup is never uploaded.

Related tools

More tools in Developer Tools →