Formater du HTML
HTML Formatter re-indents and minifies markup in your browser. HTML is not XML, and formatting it as if it were corrupts documents in four specific ways — void elements, raw-text elements, optional closing tags and significant whitespace between inline elements — each of which this handles explicitly.
L’interface de cet outil est en anglais.
Le guide ci-dessous n’est disponible qu’en anglais.
How does HTML Formatter and Minifier work?
Most HTML formatters are XML formatters with a different name, and each of the four differences between the two has produced a real bug.
Void elements do not open a scope
<br>, <img>, <input>, <hr> and ten others have no closing tag — not optionally, at all. A formatter that increases indentation on every opening tag pushes everything after the first <img> one level right and never recovers, so a page with twenty images ends up indented off the screen.
Script and style contain text, not markup
A < inside a <script> is a less-than sign. Parsing it as a tag is how if (a < b) becomes a mangled document, and it is why the sample above contains exactly that expression. The content of <script>, <style>, <textarea> and <title> is consumed whole, up to the matching close tag.
Whitespace between inline elements is rendered
<b>a</b> <i>b</i> renders as “a b”; without the space it renders as “ab”. A formatter that puts every element on its own line has inserted a space into every text flow in the document — the classic symptom is a stray gap before every full stop and after every link. Inline elements are therefore kept in a buffered run and only block elements start lines. The same rule is why <pre> content is never re-indented: there, the whitespace is the layout.
Closing tags are optional for several elements
</li>, </p>, </td> and friends may be omitted, and plenty of hand-written HTML omits them. A formatter with a strict tag stack either rejects the document or unbalances its indentation. Here the stack unwinds through elements whose close is optional when it meets a close tag that does not match the top.
What the analysis reports
An <img> with no alt attribute is flagged, because a screen reader falls back to announcing the filename — which is worse than silence, and is why a decorative image needs alt="" rather than no attribute at all. Unclosed elements are named: the browser will recover, but where it decides to close them is its choice rather than yours, and the two often differ.
Input
<div><br><p>text</p></div>
Formatted
<div>
<br>
<p>
text
</p>
</div>What options and edge cases does HTML Formatter and Minifier support?
| Parameter | Type | Default | Behaviour & edge cases |
|---|---|---|---|
| Indent | spaces | 2 | Per nesting level. Void elements do not add a level. |
| Attribute wrap | count | 4 | Tags with at least this many attributes, or longer than 100 characters, put each attribute on its own line. |
| Preserve raw text | boolean | on | pre and textarea content is never touched, because its whitespace is rendered. script and style bodies are re-indented, which is safe. |
| Void elements | 14 elements | — | area base br col embed hr img input link meta param source track wbr. None of them opens a scope. |
| Raw-text elements | script, style, textarea, title, pre | — | Content is text rather than markup. A < inside a script is a less-than sign, and parsing it as a tag corrupts the document. |
| Inline elements | kept in the flow | — | a, b, span, em, img and the rest stay on the line they were on, because a line break between them renders as a space. |
| Optional close | tolerated | — | li, p, td, tr, option and others may omit their closing tag. The stack unwinds rather than rejecting the document. |
| Attribute quotes | normalised | double | Unless the value contains a double quote, in which case single quotes are used. Boolean attributes keep their bare form. |
| Minify | whitespace | — | Collapses runs of whitespace but keeps a single space where inline elements meet, and preserves pre content. Conditional comments survive because they are markup to old IE. |
Frequently asked questions
Why is my inline element not on its own line?
Because putting it there would change what the page renders. <b>a</b> <i>b</i> shows "a b"; without the space between the tags it shows "ab". A formatter that breaks every element onto its own line inserts a space into every text flow in the document, and the symptom is a stray gap before every full stop. Inline elements stay in the run they were in.
Why was the content of my <pre> left alone?
Because in a <pre> the whitespace is the content. Re-indenting it changes what the reader sees, which is the opposite of formatting. The same applies to <textarea>, where the whitespace is the field's value. Script and style bodies are re-indented, because their whitespace is not rendered.
My HTML has no closing </li> tags. Is that broken?
No — HTML allows omitting the closing tag for li, p, td, tr, option, thead and several others, and a lot of hand-written markup does. The formatter unwinds its stack when it meets a close tag that does not match the top, so the document formats correctly. Whether you should omit them is a style question; whether the parser copes is not.
Why does it warn about a missing alt attribute?
Because an <img> with no alt makes a screen reader announce the filename — "i-m-g underscore 4 0 2 1 dot p-n-g" — which is worse than saying nothing. The fix for a decorative image is alt="", which explicitly tells assistive technology to skip it. An absent attribute and an empty one mean different things, and only one of them is correct for decoration.
Should I minify HTML?
Only as part of a build, and the win is smaller than you would guess once gzip or brotli is in play — compression already handles repeated whitespace very well. What minification is genuinely good for is email templates, where some clients reject large messages, and inline critical CSS, where the bytes are in the critical path.
Is my markup uploaded?
No. Tokenising and formatting run in your browser, which you can confirm in the Network panel. Markup from a real application frequently carries data attributes, internal URLs and inline JSON with real content in it.