HTML Formatter
Beautify and reindent HTML code for easier reading.
Back to all tools on ToolForge
HTML input
Formatted HTML
About HTML Formatter
This HTML formatter beautifies and reindents HTML code entirely in your browser, making it easier to read, debug, and review. Whether you're working with minified output from build tools, generated markup from templates, or copied snippets from documentation, this tool helps you quickly understand the structure.
Why Format HTML?
HTML formatting (also called beautification or pretty-print) adds consistent indentation and line breaks to your markup. This is useful for:
- Debugging: Find unclosed tags, nesting issues, and structural problems
- Code Review: Review changes in pull requests or team communications
- Learning: Understand the structure of complex HTML from websites
- Documentation: Present clean, readable HTML in tutorials or guides
How the Formatter Works
The formatter uses the browser's built-in DOM parser to parse your HTML, then reconstructs it with proper indentation:
- Input HTML is parsed into a DOM tree structure
- Each node (elements, text, comments) is processed recursively
- Opening tags are indented based on their nesting depth
- Closing tags align with their corresponding opening tags
- Text content is trimmed and placed on appropriate lines
Example: Before and After
Input (minified):
Title
Content here
- Item 1
- Item 2
Output (formatted):
<div class="card">
<h3>Title</h3>
<p>Content here</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
Formatting Notes
- Indentation: Uses 2 spaces per nesting level
- Attributes: Preserved exactly as written
- Comments: Kept intact with proper indentation
- Self-closing tags: Handled correctly (e.g.,
<img />,<br />) - Inline elements: May have whitespace normalized (does not affect rendering)
Common Use Cases
- Minified HTML: Read output from HTML minifiers or build tools
- Template debugging: Inspect rendered template output
- Web scraping: Clean up fetched HTML for analysis
- Email HTML: Review email template structure
- CMS content: Examine generated page markup
How to Format HTML
- Paste your HTML: Copy minified, compact, or poorly-formatted HTML into the input box above.
- Click Format: The tool will parse your HTML and rebuild it with consistent indentation.
- Review the output: Check that the formatted structure looks correct and all tags are properly nested.
- Copy the result: Click "Copy Result" to paste the beautified HTML into your editor or documentation.
Tips for Best Results
- Ensure your HTML is complete (matching opening/closing tags)
- For template code (Handlebars, Blade, etc.), some syntax may be altered
- Very large documents may take a moment to process
Frequently Asked Questions
- What is HTML formatting and why is it useful?
- HTML formatting (also called beautification or pretty-print) restructures HTML code with consistent indentation and line breaks, making it easier to read, debug, and review. This is especially helpful for minified HTML, generated markup, or copied code snippets that lack proper formatting.
- Does this tool modify my HTML content?
- No. The formatter only changes whitespace and indentation - all tags, attributes, and text content remain unchanged. However, note that insignificant whitespace (like spaces between inline elements) may be normalized, which does not affect rendering.
- What types of HTML can this formatter handle?
- This formatter handles standard HTML5 markup including nested elements, attributes, comments, and text nodes. It works best with complete HTML fragments. For very large documents or template syntax (like Handlebars, Blade), results may vary.
- Why does the output structure look different from my input?
- The formatter uses the browser's DOM parser, which automatically corrects some HTML errors (like unclosed tags or missing parents). For example,
- tags get wrapped in
- if missing. This ensures valid output but may differ from malformed input.
- tags get wrapped in
- Can I format SVG or XML with this tool?
- This tool is designed for HTML. While it may work with simple SVG, complex SVG or XML documents are better handled by dedicated formatters that preserve namespaces and processing instructions.