Format and beautify messy HTML code with proper indentation.
The HTML Formatter indents and tidies HTML using Prettier. Whitespace-sensitive elements such as <pre> and <textarea> are left alone, and embedded CSS and JavaScript are formatted too. It runs in your browser.
Made for developers. Typical uses:
The one-line snippet <div><p>Hello <strong>world</strong></p></div> becomes three lines: the div, the paragraph indented by two spaces with its inline text kept together, and the closing div. The words Hello and world keep a single space between them.
Formatting can add or remove whitespace between inline elements in ways that are invisible in most layouts but can matter in inline-block designs. To shrink HTML instead, use the HTML Minifier.
Accuracy: Output is tested against known inputs. For production code, review the result and run your own tests.
Expert Tip
Paste a minified page in here to spot nesting mistakes such as a div that never closes, then run the HTML Validator to catch errors the formatter cannot.
The HTML Formatter indents and lays out HTML so that its structure is easy to read. It uses Prettier and you can choose the indent (2 spaces, 4 spaces or tabs) and the line width (80, 100 or 120). Paste the markup, press Format, and copy or download the result as formatted.html. Embedded CSS in style elements and JavaScript in script elements are formatted too, and the document is processed in your browser.
The one-line snippet <div><p>Hello <strong>world</strong></p></div> becomes three lines. The div is on the first line, the paragraph is indented by two spaces inside it with Hello <strong>world</strong> kept on one line, and the closing div is on the last line. The words Hello and world stay on one line with a single space between them, because spaces between inline elements affect how the page is displayed.
HTML is sensitive to whitespace in some places, so the formatter is careful. The contents of pre and textarea elements are left alone, so preformatted text and code samples keep their spacing. Inline elements such as strong, em, a and span are not split onto separate lines when that could add visible space. Because of that, you may still see long lines of inline text, which is correct. A formatter that always put each tag on its own line would change what the page looks like.
Readable markup is easier to debug. Pasting a minified page into the formatter shows nesting mistakes, such as a div that never closes or a list item outside a list, at a glance. It is also a quick way to tidy output exported from a page builder or an email tool, and to bring a pasted snippet in line with the rest of your project before you commit it. Once the structure looks right, run the HTML Validator to catch errors the formatter does not.
Formatting and minifying are opposite jobs. Edit the formatted version, and publish the minified one made with the HTML Minifier. For stylesheets and scripts, there are the matching CSS Formatter and JavaScript Formatter. To turn HTML into another format, the HTML to Markdown converter is useful for moving content.
The formatter lays out markup, but it does not correct it. Unclosed tags and invalid nesting are passed through or may cause an error. It can add or remove whitespace between inline elements in ways that are invisible in most layouts but can matter in designs built with inline-block elements, so check the page if you format code that will be published. Everything runs in your browser, and the markup you paste, which may include unpublished pages or email templates, is never uploaded. Pick the same indent and line width as your editor, so that a snippet formatted here matches the rest of your project.
What minifying removes, how much it saves next to gzip and Brotli, and how to test minified CSS, JavaScript and HTML before you deploy it.
Explore more in Developer Tools, read the guides and articles, or see how we test our tools.
Minify and compress HTML code to reduce file size.
Best for shrinking a static landing page's HTML before deploying it
Format and beautify messy CSS code with proper indentation.
Best for beautifying minified CSS for editing
Format and beautify JavaScript code with proper indentation.
Best for making a minified third-party script readable enough to debug in dev tools
Validate HTML code for syntax errors and compliance.
Best for checking HTML for errors before deployment
Convert HTML code to Markdown format for documentation and blogs.
Best for converting a blog post's HTML source into Markdown before migrating to a Markdown-based CMS