Example
<div>
<p>Hello</p>
<span>World</span>
</div>
HTML Formatter
Format and beautify HTML instantly in your browser. Free online HTML formatter with configurable indentation — no data uploaded.
Enter the values below, then press Calculate (or press Enter). The calculator updates your results instantly. Try different values to see how your inputs change the outcome.
- HTML to format — enter a value. A typical HTML to format would be <div><p>Hello</p><span>World</span></div>.
- Indentation — enter a choice from the options.
- Review your results — the key output is highlighted, with supporting figures below.
Loading calculator…
Results
Formatted HTML
| Detail | Value |
|---|---|
| Lines |
What is this calculator for?
Re-indent minified or messy HTML into a readable, properly nested document for editing and review.
How to Use This Calculator
Enter the values below, then press Calculate (or press Enter). The calculator updates your results instantly. Try different values to see how your inputs change the outcome.
- HTML to format — enter a value. A typical HTML to format would be <div><p>Hello</p><span>World</span></div>.
- Indentation — enter a choice from the options.
- Review your results — the key output is highlighted, with supporting figures below.
What You'll Need
- HTML to format
- a value · required
- Indentation
- a choice from the options (2 spaces, 4 spaces, 1 tab) · optional
About This Calculator
This HTML formatter tokenizes your markup — dividing text, comments, and tags — then re-prints it with indentation that mirrors the nesting.
It understands void elements (like br, img, meta) that must not be indented as containers, and preserves the text content inside tags. The result is clean, reviewable HTML without altering any attribute or value.
Formatting runs entirely in your browser.
Worked Examples
Frequently Asked Questions
Will it change my markup?
No — only whitespace and line breaks change. All tags, attributes, and text content are preserved exactly.
Does it handle inline elements like <span>?
Yes. It keeps the nesting correct. Inline elements are valid to place on their own line, which is the standard format style.