What is HTML formatting?
HTML formatting takes messy, unindented, or minified HTML and re-prints it as clean, indented markup. This tool formats with Prettier's HTML printer, which only changes whitespace where CSS makes it insignificant, so the page renders the same; it also formats the CSS and JavaScript inside <style> and <script>. Minify compresses safely, and Validate checks the markup against the HTML standard. Everything runs in your browser.
What formatting does to your HTML
An HTML formatter parses your markup and re-prints it with consistent indentation, one nested element per level, so the structure of the document is visible at a glance. Minified or hand-edited HTML often runs tags together on a single line; formatting reveals which elements are nested inside which, making it far easier to spot an unclosed tag or a misplaced element.
Because the formatter parses HTML the way a browser does, it keeps the content of <pre> and <textarea> exactly, never adds or removes a space between inline elements such as <b> and <i>, and writes out end tags that HTML lets you omit (such as </li> and </p>), which doesn't change the page. Mis-nested tags, such as <div><span></div>, stop formatting with the line and column of the problem.
Formatting versus minifying
Formatting adds whitespace for humans; minifying removes it for machines. In development you want readable, indented HTML; in production you serve minified HTML to reduce page weight and speed up loading. The two are opposites applied at different stages of the same workflow, and this tool does both.
Minify uses html-minifier-terser, the same engine as the HTML Minifier tool. It removes comments, collapses runs of whitespace to a single space (never to none, so words and inline elements stay apart), and minifies inline CSS and JavaScript with clean-css and Terser. The content of <pre> and <textarea> is kept exactly, and a script or style with an error is left as it is, with a warning.
Keeping formatting consistent
Agreeing on one indentation style across a team keeps diffs small and reviews focused on real changes rather than whitespace. Running a formatter automatically — in your editor on save, or in a pre-commit hook — removes the debate and guarantees every file follows the same shape.
How to format HTML
- 1Paste your HTML. Paste a full document or a fragment into the input panel.
- 2Click Format. The markup is re-indented with 2 or 4 spaces, and <style> and <script> contents are formatted too, without changing how the page renders. Use Minify to compress it instead.
- 3Validate the markup. Use Validate to check the HTML against the HTML standard. Each problem, such as a mis-nested tag, a duplicate attribute or ID, or an element that isn't allowed where it is, is listed with its line and column; Go to jumps to it in the editor.
- 4Copy the result. Copy the formatted or minified HTML back into your project.
Examples
Format run-together markup
Input
<ul><li>One</li><li>Two</li></ul>
Output
<ul> <li>One</li> <li>Two</li> </ul>
Rendering is kept
No space is added between <b> and <i>, and the <pre> text keeps its spaces; the line break after <pre> is ignored by browsers.
Input
<p>Say <b>hi</b><i>!</i></p><pre> keep
this</pre>Output
<p>Say <b>hi</b><i>!</i></p>
<pre>
keep
this</pre>Validate finds a stray end tag
Input
<div><p>Text</span></div>
Output
Line 1, column 14: Stray end tag '</span>'. (close-order)
Minify for production
Whitespace collapses to one space, never to none, so the page renders the same.
Input
<div> <p>Hello</p> </div>
Output
<div> <p>Hello</p> </div>
HTML elements to know
Common element types the formatter treats specially.
| Type | Examples |
|---|---|
| Void (no end tag) | <br>, <img>, <input>, <hr>, <meta> |
| Whitespace-sensitive | <pre>, <textarea> |
| Block | <div>, <section>, <p>, <ul> |
| Inline | <span>, <a>, <strong>, <em> |
| Optional end tag | <li>, <p>, <td>, <tr>, <option> |
| Raw text | <script>, <style> |
Frequently asked questions
Does formatting change how my page renders?
No. Format only adds or removes whitespace where CSS makes it insignificant: it never adds a space between inline elements, and the content of <pre> and <textarea> is kept exactly. It may write out optional end tags such as </li>, add a closing slash to void elements such as <br />, and quote attributes consistently, which browsers treat the same. Minify collapses whitespace to a single space, never to none, keeps <pre> and <textarea> content exactly, and minifies inline CSS and JavaScript with clean-css and Terser.
Will it fix invalid HTML?
No. Format stops at structural errors such as mis-nested tags and shows the line and column, and Validate lists every problem it finds against the HTML standard, each linked to an explanation. Fix them in the input, and the output updates as you type.
What are void elements?
Elements like <br>, <img>, and <input> that have no end tag and cannot contain content. The formatter never adds an end tag to them. A "/>" on a non-void element, such as <div/>, is ignored by browsers, and Validate reports it.
Should I minify HTML for production?
Yes. Minified HTML is smaller and loads faster. Keep a formatted copy for development and serve the minified version to users; the tool shows the size before and after.
Is my HTML uploaded?
No. Formatting, minifying, and validation run entirely in your browser. The only exception is the Share link button, which uploads the current output when you click it.
Is it free?
Yes — free with no sign-up or limits.
Can I format just a fragment?
Yes. You can paste a partial snippet, not only a full document. Validate checks a snippet as if it were inside <body>, and a full document (starting with <!DOCTYPE html> or <html>) as a whole page.