HTML Formatter

Re-indented 1 line(s) of HTML at 2-space depth.

How it works

• Tokenised the markup into tags, comments, doctype, raw element bodies and text.
• Normalised whitespace inside tags without touching quoted attribute values.
• Emitted each structural token on its own line at a depth-based indentation.
• Copied script, style, pre and textarea bodies byte-for-byte.

• The formatter changes whitespace only; tags, attributes and text are preserved.
• Because HTML collapses whitespace, reflowing mixed inline content can introduce a space at an inline boundary.
• Output is 6 line(s); formatting it again changes nothing.

Methodology

1. Tokenise the markup with a quote-aware tag scanner so `>` inside an attribute value cannot end a tag.
2. Track nesting depth and emit each tag/comment on its own line at a depth-based indent.
3. Preserve raw element bodies and re-emit tags with normalised whitespace.

Usage

1. Paste or type an HTML document.
2. Choose a 2- or 4-space indent.
3. Run the formatter and copy the indented result.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

Nested elements indented

{
  "text": "<div><p>Hello</p><br></div>",
  "indentSize": 2
}

Raw script preserved

{
  "text": "<script>if (a < b) { run(); }</script>",
  "indentSize": 2
}

Attributes with a quoted angle bracket

{
  "text": "<a href=\"a>b\">link</a>",
  "indentSize": 4
}

Limitations

When to format HTML

Indentation makes markup reviewable and diffs readable. Format a document before reading or reviewing it; minify it when serving it.

The formatter is intentionally conservative: it never validates or repairs, so a broken input stays broken and visibly so.