HTML Formatter
Format HTML documents or fragments as inert local text, with selectable indentation and balance signals for tags that still need review.{{ summaryTitle }}
{{ summaryLine }}
{{ computation.values.formatted_html }}The chart renderer is unavailable. The same counts remain available in the format audit.
| Signal | Value | Review meaning | Copy |
|---|---|---|---|
| {{ row.label }} | {{ row.display }} | {{ row.detail }} |
Readable HTML makes document structure easier to review. Indentation reveals which elements are nested, line breaks separate major blocks, and consistent spacing reduces noise in code review. Formatting is especially useful for minified fragments, generated email markup, copied CMS templates, and documents whose visual rendering hides structural mistakes.
Formatting and validation solve different problems. A formatter can arrange the tokens it recognizes without proving that the document follows every HTML parsing rule. An unmatched closing tag may still be printed neatly, and an opening element left at the end of the source may still need repair. Clean indentation should therefore be treated as a review aid, not a certificate that the markup is correct or accessible.
- Block element
- A structural element such as a section, heading, list, table, or paragraph that normally earns its own line.
- Void element
- An element such as
<img>,<br>, or<meta>that does not contain child content or need a closing tag. - Literal-content element
- An element such as
<pre>,<textarea>,<script>, or<style>whose body should not be reflowed as ordinary markup.
Whitespace carries different meanings in different places. Leading indentation outside elements can usually be regenerated, while spaces inside quoted attributes, preformatted text, scripts, and styles may be significant. A cautious source formatter keeps literal bodies intact and normalizes only the surrounding markup and ordinary text.
Inert formatting matters when the source is untrusted. Pasted tags, event handlers, styles, image references, and scripts should remain plain text during review rather than being mounted as a document. This avoids turning a formatting task into an accidental preview or execution path.
Formatting also changes the source representation. It may collapse ordinary text whitespace, move elements onto new lines, and add indentation even when the rendered page looks the same. Preserve a copy of the original when byte-for-byte stability, template delimiters, unusual XML rules, or exact whitespace is important.
How to Use This Tool:
Format a document or fragment as inert source, then use the balance signals to decide what still needs manual review.
- Paste up to 120,000 characters into HTML source, or load one local HTML, XHTML, or text file up to 250 KB.
- Choose two spaces, four spaces, or tabs under Indentation to match the destination project's convention.
- Enable Final newline only when the receiving editor or repository expects a line feed after the last token.
- Read the summary before copying the result. If it reports lexical balance signals, inspect Format audit for unmatched closing tags and elements left open; the formatter does not repair them.
Interpreting Results:
Formatted HTML is the rewritten source. Compare sensitive sections such as templates, inline text, <pre> blocks, scripts, and styles before replacing the original. The element and text counts describe recognized source tokens; they do not measure rendering quality, accessibility, or standards conformance.
A Balanced result means the lexical scan found no unmatched closing tokens and no tracked elements left open. It does not account for every recovery rule used by a browser's HTML parser. Validate important production markup separately, and test the rendered document in its real environment.
Technical Details:
HTML source contains declarations, comments, opening and closing tags, ordinary text, and literal bodies. Safe formatting begins by separating those token classes without rendering the document. Quoted attribute values are scanned as protected spans, so a greater-than sign inside a quote does not end the tag early.
Transformation Core
The formatter follows a bounded token-to-layout transformation. Each stage has a narrow purpose, which makes it possible to distinguish layout changes from unresolved structure.
| Stage | Transformation | Preserved boundary |
|---|---|---|
| Token scan | Separates tags, comments, declarations, text, and literal bodies. | Quoted attribute content and complete comment or CDATA spans stay intact. |
| Nesting pass | Tracks recognized opening and closing element names. | Unmatched closings remain visible; missing closings are counted rather than invented. |
| Whitespace pass | Collapses ordinary text runs and redundant whitespace between tag parts. | Whitespace inside quoted attributes and literal-content bodies is retained. |
| Layout pass | Places structural elements on indented lines and keeps short inline-only content together. | Inline content is kept on one line only when the compact element fits the available width. |
| Ending pass | Joins output with line feeds and optionally appends one final line feed. | The selected indentation unit is used consistently at each nesting depth. |
Short elements containing no block children may stay inline when their compact representation fits within a 96-character layout allowance after indentation. Longer or structurally nested elements break across lines. Ordinary text whitespace is reduced to single spaces before layout, except that an explicit two-space line ending inside source text is not treated as an HTML-specific hard-break rule.
The scan rejects an unclosed comment, CDATA section, tag token, quoted attribute, or literal-content element because a safe boundary cannot be determined. By contrast, a completed closing tag without a matching tracked opener is retained and reported. An opener still on the nesting stack at the end is also reported without an inserted closing tag.
| Question | What the result supports | What it does not establish |
|---|---|---|
| Readability | Consistent indentation, line breaks, and compact tag spacing | A preferred style for every project or templating language |
| Balance | Counts unmatched closing tags and tracked elements left open | Full browser parse-tree equivalence or semantic validity |
| Safety | Processes the source locally as inert text | Sanitization of markup for later rendering |
| Content | Preserves literal bodies and quoted attribute values | Byte-for-byte preservation of ordinary text whitespace |
The source is never rendered, executed, or uploaded during formatting. Remote images, fonts, scripts, and styles referenced by the pasted markup are not fetched. This privacy property applies to the formatting step; it does not make the copied markup safe to render elsewhere.
References:
- The HTML syntax, WHATWG HTML Living Standard.