HTML Formatter
Format, beautify, and minify HTML code online
Input
Output
Make HTML readable before you ship or review it
Minified HTML is great for production but unreadable for humans. Formatting indents tags, breaks long attribute lists, and aligns nested elements so you can review markup, debug rendering, or hand off a snippet without manually inserting line breaks.
Use the formatter when you need to
Read a minified production page
Pretty-print HTML pulled from devtools so you can locate a specific tag or attribute quickly.
Review markup in a code review or doc
Clean up indentation so a teammate can scan the structure without scrolling sideways.
Switch back and forth between dev and production
Format for local debugging, then minify again before deploy to keep payload size down.
How to format HTML quickly
- 1
Paste minified HTML or a snippet from devtools.
- 2
Pick spaces or tabs and the desired indentation width.
- 3
Click Format and copy the readable output, or click Minify to compress again.
Keep going
Live HTML playground
Edit HTML, CSS, and JS together with a sandboxed preview pane.
Preview HTML
Render pasted HTML in a sandboxed frame to confirm how it looks.
Format CSS
Clean up stylesheet indentation alongside your HTML markup.
Format JavaScript
Beautify inline scripts you extracted from the same page.
Common HTML-formatting workflows
Format a page from view-source to verify that semantic structure and a11y attributes are correct.
Pretty-print a snippet so it reads cleanly in code blocks and renders without weird indentation.
Compress markup for inclusion inside JS strings, JSON config, or email templates.
Related Tools
Frequently Asked Questions
Paste your HTML into the editor and click Format. Choose 2-space, 4-space, or tab indentation. The tool runs entirely in your browser — your markup is never sent to any server.
Yes. Click Minify to strip whitespace, line breaks, and comments. This is useful for embedding HTML in JavaScript strings, JSON config, or email templates where compact markup matters.
Yes. Inline <script> and <style> blocks are preserved. The formatter indents them as part of the surrounding markup but does not rewrite the JavaScript or CSS inside.
Formatting changes whitespace, which can affect rendering inside <pre>, <textarea>, or any element with white-space: pre styling. For everything else, the rendered output is identical to the original.
Yes. The tool handles partial HTML — you don't need a full <!DOCTYPE>, <html>, or <body>. Paste any snippet and it will be indented as a fragment.