HTML Formatter
How to Use
Paste HTML and the tool indents according to tag nesting, putting each element on its own line. Choose 2- or 4-space indent.
Formatting Rules
The tool tracks open/close tags to determine indent depth and emits each tag on its own line. Void elements (`<br>`, `<img>`, etc.) are handled without expecting a close tag, and the inner contents of `<pre>`, `<script>`, `<style>`, and `<textarea>` are preserved verbatim. It's not a full HTML parser, so unusual attribute values or non-standard tags may produce slightly off results.
Use Cases
- Decoding bundler-output or server-rendered minified HTML
- Tidying up HTML snippets before posting to a blog or chat
- Inspecting HTML copied from DevTools locally
- Cleaning up template-engine output (EJS, Handlebars, etc.)
- Reviewing the structure of an email HTML body
Privacy
Formatting happens entirely in the browser. The HTML never leaves your device, so internal templates or content that contains personal data stays local.
FAQ
What is the difference between formatting and minifying HTML?
Formatting (beautifying) adds indentation and line breaks to make HTML readable, while minifying strips whitespace to shrink the file. This tool does the formatting direction only; use the HTML Minifier tool for the opposite.
Is it safe to paste internal templates or HTML with personal data?
Yes. All formatting runs entirely in your browser and the HTML never leaves your device — there is no upload, logging, or storage. Internal templates and content with personal data stay local.
Does it preserve the contents of <pre> and <script> blocks?
Yes. The inner contents of <pre>, <script>, <style>, and <textarea> are kept verbatim so embedded code and pre-formatted text are not re-indented or broken.
Why does my HTML come out slightly wrong sometimes?
This is a tag-tracking formatter, not a full HTML parser. Unusual attribute values, malformed markup, or non-standard tags can produce slightly off indentation. Void elements like <br> and <img> are handled correctly without a closing tag.
Can I choose the indentation width?
Yes. You can switch between 2-space and 4-space indentation, and each element is placed on its own line according to its nesting depth.