HTML Formatter

Runs in browser Formatting

Format HTML documents or fragments with configurable indentation, void-element handling and attribute wrapping, keeping inline elements and preformatted content intact.

Privacy: This tool runs entirely in your browser. Your input never leaves your device.

How to use HTML Formatter

  1. Paste HTML markup.
  2. Select indentation and attribute wrapping.
  3. Copy the formatted markup or download it as .html.

HTML Formatter features

  • Indents nested block elements; inline elements stay with their text
  • Preserves <pre> and <textarea> content byte-for-byte
  • Formats embedded <style> with the CSS formatter and <script> with the JavaScript formatter
  • Attribute wrapping: never, long tags only, or one attribute per line
  • Void elements (<br>, <img>, <input> …) handled without closing tags
  • Keeps comments and IE conditional comments; preserves blank lines
  • Works on full documents and fragments

HTML Formatter example

Format a fragment

Input:

<div class="card"><h2>Title</h2><p>Some <b>bold</b> text</p><ul><li>One</li><li>Two</li></ul></div>

Output:

<div class="card">
  <h2>Title</h2>
  <p>Some <b>bold</b> text</p>
  <ul>
    <li>One</li>
    <li>Two</li>
  </ul>
</div>

Frequently asked questions about HTML Formatter

Does it preserve <pre> and <textarea> content?

Yes. Content of pre and textarea is copied byte-for-byte because whitespace is significant there. Embedded <script> and <style> blocks are formatted with the JavaScript and CSS formatters.

How are inline elements handled?

Inline elements such as <a>, <span>, <b> and <code> stay on the same line as their surrounding text, so paragraphs remain readable. Block elements get their own lines and indentation.

Can I put each attribute on its own line?

Yes. Choose "One per line" or "Wrap long tags" (wraps only when the tag exceeds the maximum line length).

Does it fix invalid HTML?

No. Mismatched or unclosed tags are formatted best-effort and a warning is shown, but the markup is not rewritten. Use it as a beautifier, not a validator.

Are conditional comments kept?

Yes, all comments are kept by default, including <!--[if IE]> blocks. Untick "Keep comments" to remove regular comments.

Technical notes

The formatter is a tokenizer plus indentation printer, not an HTML5 tree builder: it applies no implied end tags, so <li>One<li>Two nests instead of closing, and a stray closing tag is printed where it appears. Tag names are lowercased (<MyComponent> becomes <mycomponent>), while attribute names, quote style, bare boolean attributes and entities are copied verbatim; unquoted values gain double quotes. Raw script, style, pre and textarea content ends at the matching closing tag.

<style> content goes through the CSS formatter and <script> through the JavaScript formatter when its type is absent or javascript/ecmascript/module/jsx; other scripts (JSON-LD, templates) are merely re-indented. Text is never re-wrapped — the maximum line length only governs attribute wrapping and one-line joining of short elements. CRLF becomes LF, at most one blank line survives, anything outside the fixed 60-name inline list (including custom elements) is block-level, and input over 500,000 characters is refused.