HTML Formatter
Formatters & BeautifiersFormat, indent, and beautify HTML, XHTML, and HTML5 markup. Free, private — all processing in your browser.
The HTML Formatter is a free online tool that takes messy, minified, or machine-generated HTML and transforms it into clean, properly indented, human-readable markup. Whether you are debugging server-rendered HTML, cleaning up a WYSIWYG editor output, formatting scraped web content, or preparing a code sample for documentation, this formatter handles it instantly in your browser. Supports HTML5, XHTML, and legacy HTML — with configurable indentation (2, 4, or tab), preservation of whitespace in <pre> and <code> blocks, self-closing tags, and attribute wrapping.
Good HTML formatting is more than aesthetics — consistent indentation reveals structure, makes errors visible (mismatched tags, unclosed elements), speeds up code review, and produces smaller diffs in version control. This formatter also handles mixed content like HTML embedded with inline CSS (<style> blocks), inline JavaScript (<script> blocks), and SVG — keeping each language formatted according to its own conventions. All processing happens in your browser — your HTML content never leaves your device, making the tool safe for confidential internal dashboards, proprietary email templates, and client project code.
HTML Formatter — key features
Pretty-print any HTML
Messy single-line HTML becomes indented, multi-line markup that reveals the document structure at a glance.
Multiple indentation options
Choose 2 spaces, 4 spaces, or tab indentation. Match your project or team's style guide.
HTML5, XHTML, and legacy HTML
Formatter handles all HTML variants. Self-closing tags follow the variant you select.
Format inline CSS and JavaScript
Style blocks and script blocks inside HTML are formatted according to CSS and JavaScript conventions, not HTML indentation.
Preserve whitespace in pre, code, textarea
Whitespace-sensitive elements keep their original content — essential for code samples and text areas.
Attribute wrapping
Long attribute lists are broken onto multiple lines for readability. Configurable threshold (default 80 chars).
Handle malformed HTML gracefully
Like a browser, the formatter recovers from most errors — unclosed tags, mismatched nesting, unquoted attributes. You get clean output even from broken input.
100% client-side processing
Your HTML never leaves your browser. Safe to format email templates, internal tools, and client project code.
How to use the HTML Formatter
- 1
Paste your HTML
Copy HTML from an editor, view-source on a page, or a server response. Paste it into the input field.
- 2
Choose indentation
Select 2 spaces, 4 spaces, or tab. 2 spaces is the modern web default.
- 3
Select HTML variant
HTML5 (most common today), XHTML (for strict XML compatibility), or HTML 4/Legacy.
- 4
Click Format
The formatted output appears instantly. Structure and nesting are now visible through indentation.
- 5
Copy or download
Copy the cleaned HTML to your clipboard with one click, or download as a .html file.
Common use cases for the HTML Formatter
Web development
- →Clean up WYSIWYG editor output: CMS editors (TinyMCE, CKEditor, Quill) produce messy HTML. Format to make it readable before committing.
- →Format server-rendered HTML: PHP, Java, Python, Node templates often output HTML without indentation. Format to review rendered pages in staging.
- →Debug scraped or embedded HTML: HTML from third-party sources (APIs, partner sites) often arrives minified or malformed. Format to inspect structure.
- →Prepare code examples: Before including HTML in blog posts, documentation, or tutorials, format it consistently so readers see clean code.
Email development
- →Format email templates: HTML emails use nested tables and inline styles — formatting makes the structure navigable.
- →Audit email HTML for errors: Clean formatting reveals missing closing tags and nesting mistakes that cause rendering issues in Outlook and Gmail.
- →Clean up Mailchimp / SendGrid exports: Exported email HTML is often minified. Format to understand structure before customizing.
Debugging and QA
- →Inspect rendered DOM: Copy `outerHTML` from browser DevTools, format, and review to understand what the browser actually rendered.
- →Compare expected vs actual output: Format both expected and actual HTML, then use a diff tool to find differences.
- →Validate against design spec: Formatted HTML makes it easier to verify that your markup matches the intended structure.
SEO and accessibility
- →Audit semantic structure: Formatted HTML reveals whether you are using proper heading hierarchy (h1-h6), landmark elements (nav, main, aside), and sectioning correctly.
- →Check ARIA attributes: Verify ARIA roles, states, and properties are applied correctly on interactive elements.
- →Review Open Graph and meta tags: Properly-formatted `<head>` makes it easy to check og:image, og:description, twitter:card, etc.
HTML Formatter — examples
Format minified HTML
Typical server output with no whitespace.
<html><head><title>Demo</title></head><body><h1>Hello</h1><p>World</p></body></html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<h1>Hello</h1>
<p>World</p>
</body>
</html>Format nested structure
Deeply nested HTML becomes navigable with indentation.
<div><section><article><h2>Title</h2><p>Content</p></article></section></div>
<div>
<section>
<article>
<h2>Title</h2>
<p>Content</p>
</article>
</section>
</div>Wrap long attribute lists
Tags with many attributes break onto multiple lines for readability.
<a href="https://example.com/path" class="btn btn-primary" target="_blank" rel="noopener noreferrer" data-tracking-id="cta-main">Click me</a>
<a href="https://example.com/path" class="btn btn-primary" target="_blank" rel="noopener noreferrer" data-tracking-id="cta-main" > Click me </a>
Preserve <pre> content
Code blocks keep their original whitespace.
<pre><code>function hello() {
console.log("hi");
}</code></pre><pre><code>function hello() {
console.log("hi");
}</code></pre>Format inline styles
CSS inside <style> tags gets CSS-style formatting.
<style>body{margin:0;padding:0}h1{color:red}</style><style>
body {
margin: 0;
padding: 0;
}
h1 {
color: red;
}
</style>Fix unclosed tags
Malformed HTML is cleaned up.
<ul><li>One<li>Two<li>Three</ul>
<ul> <li>One</li> <li>Two</li> <li>Three</li> </ul>
Technical details
HTML formatting follows conventions from the WHATWG HTML Living Standard and common style guides (Google HTML/CSS Style Guide, Airbnb, Prettier). The formatter:
1. Parses the HTML input into a document tree (handling both valid and malformed markup permissively, like browsers do).
2. Re-serializes the tree with consistent indentation and attribute formatting.
3. Preserves semantic whitespace in <pre>, <textarea>, <script>, and <style> blocks where whitespace matters.
4. Formats inline CSS and JavaScript according to their own rules.
5. Identifies common errors like unclosed tags, mismatched nesting, and invalid attribute values.
Indentation options:
- 2 spaces (most common in modern web development)
- 4 spaces (Python-style, older Java convention)
- Tab (team preference; size configurable in editors)
Self-closing tags: Void elements (<br>, <img>, <input>, <meta>, <link>, <hr>, <source>, <track>, <wbr>, etc.) are rendered as <br> (HTML5) or <br /> (XHTML). This formatter respects the mode you choose.
Attribute wrapping: Long attribute lists (> 80 characters) are broken onto multiple lines, one attribute per line, aligned with the opening tag. Configurable threshold.
Handling errors: HTML is permissive by design — browsers tolerate most errors silently. This formatter follows the same approach: malformed HTML is cleaned up best-effort without throwing errors. For strict validation with error reporting, use a dedicated validator like W3C Validator.
Not a minifier: This tool is for beautifying (expanding with indentation). For minification (removing whitespace and compressing), use our HTML Minifier.
Common problems and solutions
⚠Whitespace inside inline elements changes rendering
Formatting adds whitespace between elements. For `<span>` in text, this can insert spaces where you do not want them. Be careful with inline elements where whitespace is significant — re-check visually after formatting.
⚠Minified HTML is not always reformattable perfectly
Some minifiers remove optional closing tags (like `</li>` before `<li>`) which is valid HTML5 but confusing to format. The tool adds them back, which is usually what you want for readability.
⚠Pretty-printed HTML is larger
Formatted HTML has more whitespace, making it larger over the wire. For production, minify HTML (remove whitespace) — formatting is for development and review.
⚠Preserving script/style sensitivity
JavaScript and CSS inside HTML have their own formatting rules. The formatter handles this but may not match your project's specific style for those languages — review and run Prettier/ESLint after if needed.
⚠Formatter changes malformed HTML behavior
The HTML parser rewrites mismatched or overlapping tags to valid structure, which may differ from how a specific browser interpreted the original. For strict consistency, validate HTML before formatting.
⚠Content in contentEditable can lose structure
HTML from contentEditable elements often has quirks like empty <div>s for newlines, nested <font> tags, etc. Formatting helps review but you may still need to clean the HTML semantically.
⚠HTML entities are not always preserved
The formatter may normalize entities: ` ` might become ` ` or literal non-breaking space. If you have specific entity requirements (e.g., for email), check the output.
⚠Deep nesting is unreadable even when formatted
HTML that is 15+ levels deep becomes painful to read at any indentation. Consider refactoring your markup — break into components, use semantic wrappers, or generate HTML from a template with clearer structure.
HTML Formatter — comparisons and alternatives
HTML Formatter vs HTML Minifier: Formatter adds whitespace and indentation for readability; minifier removes whitespace and compresses for production delivery. Use formatter for development/debugging, minifier for production deploys. See HTML Minifier.
HTML vs XML formatter: XML has stricter rules (all tags must close, case matters, attributes always quoted). XML formatters reject invalid XML; HTML formatters tolerate errors. Use the XML Formatter for strict XML documents.
HTML Formatter vs Prettier: Prettier is a full-featured code formatter supporting HTML, CSS, JavaScript, TypeScript, Markdown, and more. Great for IDE integration and committed config. This tool is for ad-hoc formatting in a browser without installing anything. Both produce similar output.
HTML Formatter vs Tidy: HTML Tidy (1998) is a classic command-line tool. Still maintained; widely available. Use Tidy in scripts and CI pipelines; use this tool for quick manual formatting.
HTML Formatter vs browser DevTools: Browser DevTools shows formatted HTML in the Elements panel — but copying it may include DevTools-specific annotations. Use this tool when you need clean standalone output.
HTML vs JSX formatting: JSX (React) is HTML-like but follows JavaScript conventions. This HTML formatter will not correctly handle JSX {expression} blocks. For JSX, use Prettier or your IDE's built-in formatter.
Frequently asked questions about the HTML Formatter
▶What does this HTML formatter do?
It takes HTML input — whether minified, broken, or just messy — and outputs clean, properly indented HTML with consistent formatting. Helps you read, debug, and review HTML faster. It also fixes common structural issues like unclosed tags and inconsistent indentation.
▶Is it safe to paste HTML with client data or proprietary code?
Yes. The formatter runs entirely in your browser — no HTML is sent to any server. Safe for confidential email templates, client project code, internal dashboards, and proprietary markup. Open DevTools Network tab to verify zero outbound requests.
▶What indentation should I use?
2 spaces is the modern web development default — used by React, Vue, Angular, Prettier, Google's HTML/CSS Style Guide, and most open-source projects. 4 spaces is common in older codebases and some enterprise environments. Tabs are preferred by some teams for accessibility (each developer sets their tab width). Pick what matches your project.
▶Does this tool validate HTML?
It detects and fixes basic structural issues (unclosed tags, obvious nesting errors) the way browsers do, but it is not a strict validator. For thorough validation with error reporting against the HTML5 spec, use the W3C Validator or html-validate in your build pipeline.
▶Does it support HTML5?
Yes. HTML5 is the default. Self-closing tags render as <br> (not <br />). Modern semantic elements (article, section, nav, aside, main, figure) are handled. Choose XHTML mode only if you need strict XML-compatible output.
▶How does it handle inline CSS and JavaScript?
<style> blocks are formatted using CSS indentation rules (selector on its own line, property per line, braces with space). <script> blocks are formatted using JavaScript conventions (statements per line, consistent bracing). You get cleanly formatted HTML, CSS, and JS — all in one pass.
▶Can I format HTML fragments (not a full document)?
Yes. Paste just a <div> or a component snippet — the formatter handles fragments without requiring <html> / <body> wrappers. Useful for formatting email template sections, React/Vue component output, or Markdown HTML snippets.
▶How do I handle very long attribute lists?
The formatter automatically wraps attribute lists that exceed 80 characters onto multiple lines, one attribute per line. This is the standard convention in Prettier, Airbnb, and Google style guides. Threshold is configurable.
▶Why does my <pre> content look different?
It should not. <pre>, <code>, <textarea>, and <script>/<style> content is preserved verbatim — whitespace inside these elements is significant and must not be changed. If your <pre> content looks different, please file a bug.
▶Can I minify HTML instead of beautifying?
Yes — but use our dedicated HTML Minifier. Minification removes unnecessary whitespace, collapses empty attributes, and can reduce HTML size by 20-40%. Use minified HTML for production, beautified HTML for development and review.
Additional resources
- WHATWG HTML Living Standard — Authoritative HTML specification, continuously updated.
- W3C HTML Validator — Strict validation with detailed error reporting.
- Google HTML/CSS Style Guide — Google's formatting conventions for HTML and CSS.
- Prettier — Opinionated code formatter supporting HTML, CSS, JavaScript, and more.
- MDN HTML Reference — Comprehensive HTML element and attribute reference.
Related tools
All Formatters & BeautifiersCSS Formatter
Beautify and indent CSS, SCSS, LESS code — configurable style, production-ready output
CSS Minifier
Compress CSS to minimum size — remove whitespace, comments, shorten values
HTML Entity Encoder/Decoder
Encode special characters to HTML entities (&, <, ", ©) or decode entities back to their literal characters.
HTML Minifier
Compress HTML by removing whitespace, comments, optional tags — 20-40% smaller
HTML Table to CSV
Convert HTML tables to CSV format for data analysis. Handles rowspan, colspan, and extracts clean tabular data.
HTML to Markdown
Convert HTML to clean, readable Markdown preserving structure and formatting
Learn more
Explore more tools
200+ free tools that run in your browser.
Browse all tools →