HTML Formatter

What is HTML formatting?

HTML is forgiving by design: the browser parses whatever it gets and produces a DOM, silently fixing missing closing tags, mis-nested elements, and unquoted attributes. That forgivingness is good for the web and bad for reading. Minified HTML from a build pipeline, copied from a rendered page, or saved by hand often arrives as one long line.

Formatting adds indentation and line breaks without changing the rendered output. Minifying reverses it: whitespace between tags is removed while content inside <pre>, <textarea>, <script>, and <style> is preserved.

How to use

Paste HTML into the input box and choose a mode:

• Format - re-indents the document. Uses Prettier's HTML parser, which handles embedded CSS and JavaScript in <script> and <style> blocks.
• Minify - removes whitespace between tags. Content inside <pre>, <textarea>, <script>, and <style> is left alone.
• Check - structural scan. Reports common issues: unclosed tags, extra closing tags, missing DOCTYPE, missing lang on <html>, images without alt. This is a lint, not a W3C validator - see the next section.

Check is not validation

There is no such thing as "invalid HTML" in the way there is "invalid XML". The HTML5 parsing algorithm is specified to recover from any input and produce a DOM. Browsers never reject HTML; they fix it. A true validator - the W3C's, for example - checks a document against the HTML specification's content models, and that is a much larger job than a browser-based tool can do offline.

What the Check mode does instead is a structural scan. It reports things a human reviewer would notice - unclosed <div>, extra </span>, missing alt on <img> - using a stack-based tag scanner. Void elements such as <br>, <img>, and <input> and optional-close elements such as <li>, <p>, and <td> are handled correctly. It does not check attribute values, CSS validity, or ARIA rules.

FAQ

Does formatting change what the browser renders?

Not for well-formed documents. Whitespace between block-level elements is ignored by the browser. Whitespace inside inline elements such as <span> and <a> is preserved by both Prettier and this tool. The one risk is a document that relies on whitespace-sensitive inline layout, which is rare and usually intentional only inside <pre>.

Why is my pre content changing?

Prettier formats <pre> content correctly, but it re-indents the opening tag. If the content of the <pre> starts on the same line as the tag, the content is preserved. If the content is a multi-line code block, some extra indentation may be added to align it with the tag. Use Minify mode if you need the content preserved byte-for-byte.

What does Check mode miss?

It does not check tag correctness against the HTML5 content model - for example, a <div> inside a <p> is auto-closed by the parser but is usually a mistake the scanner will not flag. It does not check attribute values, CSS validity, ARIA rules, or accessibility beyond alt on images. For those, use a purpose-built linter such as html-validate or the W3C validator.

Is my HTML sent anywhere?

No. Parsing, formatting, and minification run entirely in your browser. Prettier is loaded from this domain the first time you use the tool.

Can I format a full HTML document with a doctype?

Yes. Prettier preserves the doctype and the <html>, <head>, and <body> structure.

Why is the first Format click slow?

Prettier is a substantial library and it is loaded on demand, only when you first press Format on this page. The next click is instant. No other page on this site loads Prettier.