tool
HTML Formatter, Validator & Minifier
Turn cluttered HTML into clean, readable markup. Format your document, catch common HTML errors, and keep your structure organized with a simple online HTML tool.
paste your code and choose format or minify
Clean up, check and compress your HTML
Paste a complete HTML document or just a fragment, such as a card component, an email block or markup copied from a CMS. The formatter re-indents every nested element so the structure is obvious at a glance, the validator points out markup that breaks HTML rules, and the minifier removes comments and whitespace between tags. Everything runs in your browser using Prettier and html-validate.
What can you do?
- 1. Beautify HTML
Indent nested elements with two spaces and wrap long lines at around 100 characters, so parent–child relationships are easy to follow and missing wrappers stand out. - 2. Validate HTML
Check markup against the HTML standard and get the first problem reported with its line and column, such as elements closed in the wrong order, elements placed where they aren't allowed or duplicate id attributes. - 3. Minify HTML
Remove HTML comments, the whitespace between tags and repeated spaces to produce compact markup for templates, embeds and production pages. - 4. Count tags and lines
See how many elements and lines your markup contains, useful for spotting unexpectedly bloated output from page builders.
Why format and validate HTML?
Browsers are forgiving. When markup is invalid they quietly repair it, and the repaired page often doesn't look the way you expected: a <div> inside a <p> closes the paragraph early, a stray closing tag shifts your layout, and a duplicated id breaks the JavaScript or label that depends on it.
Formatting exposes these problems visually because the indentation stops lining up, and validation names them precisely. It's a quick sanity check before you paste markup into a template, send an HTML email or hand a component to someone else.
How to format HTML online
- 1. Paste your markup
A full page with <!DOCTYPE html> works, and so does a short snippet. - 2. Pick an action
Format for readable markup, Minify for compact markup, or Validate to check the code without changing it. - 3. Fix errors one at a time
Validation runs before formatting and minifying. The first problem is shown with its line and column; fix it and run again until the markup passes. - 4. Copy the output
Copy the processed HTML into your project or template.
Common HTML errors and how to fix them
These are the kinds of mistakes the validator reports most often in copied or hand-edited markup.
| Problem | Example | Fix |
|---|---|---|
| Tags closed in the wrong order | <b><i>text</b></i> | Close the inner element first: </i></b>. |
| Block element inside a paragraph | <p><div>…</div></p> | Change the <p> to a <div>, or the inner <div> to a <span>. |
| List item outside a list | <div><li>Item</li></div> | Wrap list items in <ul> or <ol>. |
| Duplicate id | id="email" | Each id must be unique on the page; use a class for repeated styling. |
| Unclosed element | <section><h2>Title</h2> | Add the missing closing tag. |
| Obsolete elements or attributes | <center>, <font>, align="left" | Replace presentational markup with CSS. |
Things to know before minifying HTML
Minifying removes the whitespace between tags. Most of the time that is invisible, but whitespace between inline elements is real content: two links separated by a space, such as <a>Home</a> <a>Blog</a>, will touch once the space is removed. If spacing changes after minifying, add the gap with CSS (margin or gap) instead of relying on a space character.
Repeated spaces are also collapsed, so avoid minifying documents that contain <pre> or <textarea> blocks whose spacing matters, such as code samples or ASCII tables. For full sites, your framework or build step usually minifies HTML automatically; this tool is ideal for snippets, embeds and email templates.
Frequently asked questions
Can I format an HTML snippet instead of a full page?
Yes. You can paste a fragment such as a navigation bar or a single component. You don't need <html>, <head> or <body> tags.
Does the formatter fix invalid HTML automatically?
No. It reports the problem so you can decide how to fix it. Automatically guessing where a missing tag belongs can silently change your layout, so the fix is left to you.
Why does the validator show only one error?
It reports the first problem it finds, with the line and column. One structural error often causes several follow-on messages, so fixing them in order is usually faster.
Can I use it for HTML email templates?
You can format and minify email markup. Be aware that emails often rely on older attributes like bgcolor or align for client compatibility, and the validator may flag them as obsolete even though they are intentional.
Is my HTML uploaded anywhere?
No. Formatting and validation run inside your browser and your markup is not sent to a server.
Related tools
Cleaning up inline styles or scripts as well? Use the CSS formatter and JavaScript formatter, or compare two versions of a template with the diff checker.
- CSS Formatter, Validator & Minifier – Beautify, validate and minify stylesheets.
- JavaScript Formatter & Validator – Format, lint and minify JavaScript snippets.
- XML Formatter, Validator & Minifier – Pretty print, validate and minify XML, SVG and RSS.
- Markdown Formatter – Give README and docs files a consistent Markdown style.
- Vue Formatter & Validator – Format Vue single-file components and check every block.
- Diff Checker – Compare two versions of text or code line by line.