HTML Formatter
Paste minified or messy HTML and get clean, consistently indented code, with embedded CSS and JavaScript formatted too.
- Indent & wrap options
- CSS & JS inside
- Unclosed-tag warnings
- Live preview
What is an HTML formatter?
An HTML formatter rewrites HTML with consistent indentation and line breaks so its structure is easy to read. It is the quickest way to inspect minified pages, email templates, CMS output or code copied from browser developer tools. This formatter uses the widely used js-beautify engine: block elements go on their own lines, inline elements stay inline, and the contents of pre and textarea are left exactly as they are. Inline style and script blocks are formatted as CSS and JavaScript. It also checks for unclosed or mismatched tags and shows a sandboxed preview.
How to format HTML
- Paste your HTML or choose Open File.
- Pick the indent (2 spaces, 4 spaces or tabs), line wrap and how attributes wrap.
- Read the formatted code on the right and check any tag warnings below.
- Copy the result or download it as an .html file.
Formatting tips
- Inline elements such as <a>, <b> and <span> stay on the same line as their text.
- Choose “One per line” attributes for components with many props.
- Turn off “Format CSS & JS” to leave script and style blocks exactly as they are.
- Compare two versions with the text diff tool after formatting both.
Why use this html formatter
- Readable in one pasteFormats as you type with sensible defaults; no button to press.
- Spots broken tagsWarns about unclosed and mismatched tags with line numbers.
- Live sandboxed previewSee the rendered page next to the code, with scripts disabled for safety.
- Code never leaves your deviceFormatting runs in your browser, so internal templates, emails and client pages are never uploaded.
Common uses
- Minified pages. Read the source of a production page.
- Email templates. Untangle nested table layouts.
- CMS and builder output. Clean up HTML from WordPress, Webflow or page builders.
- Code review. Normalise indentation before comparing versions.
Working with other formats? Try the XML formatter, JSON formatter and SQL formatter, convert HTML to Markdown, or compare versions with the diff checker.
Example: one line becomes readable
<div class="card"><h1>Hi</h1><ul><li>One</li><li>Two</li></ul></div> → <div class="card"> <h1>Hi</h1> <ul> <li>One</li> <li>Two</li> </ul> </div>
What to expect from the result
Formatting changes whitespace only between elements; it does not fix invalid HTML. Template syntax (Handlebars, Jinja, Liquid, Vue) is usually preserved, but very complex templates may need checking. Files up to 10 MB.
HTML Formatter questions
How do I format HTML?
Paste it into the left box. The formatted HTML appears on the right instantly; adjust indentation and wrapping with the options above.
Does formatting change how my page looks?
Normally no. Whitespace between block elements does not render. Contents of pre and textarea are never changed.
Can it format CSS and JavaScript inside HTML?
Yes. Style and script blocks are formatted with the matching CSS and JavaScript beautifiers. Untick “Format CSS & JS” to keep them as they are.
Does it validate HTML?
It warns about unclosed and mismatched tags with line numbers. For full standards validation use the W3C validator.
Is my HTML uploaded?
No. Formatting runs in your browser and nothing is sent to a server.