HTML Beautifier & Minifier
Re-indent messy or minified HTML so nested elements are easy to follow, or minify it by removing comments and extra whitespace. Pre, textarea, script and style contents are kept as written.
About the HTML Beautifier & Minifier
HTML copied from View Source, a CMS export or an email builder is often one long line or indented at random, which makes it hard to see where an element starts and ends. The beautifier puts each block-level element (div, section, ul, table and so on) on its own line and indents its children, while inline elements such as <a>, <strong> and <span> stay on the same line as the text around them, so paragraphs remain readable. Short elements like <li>Item</li> stay on one line.
It understands the parts of HTML where layout matters. Content inside <pre>, <textarea> and <title> is copied exactly. <script> and <style> blocks are re-indented as a whole, but the code inside is not changed. A > inside a quoted attribute value doesn’t confuse it, and elements whose end tag may be left out, like <li>, <td> and <p>, are indented correctly even when the closing tag is missing.
Minify works the other way for production. It deletes comments (except old Internet Explorer conditional comments), collapses runs of spaces and line breaks in text to a single space, and removes whitespace next to block-level tags, where browsers ignore it anyway. A single space between inline elements, as in <b>a</b> <i>b</i>, is kept, because removing it would join the words.
To format the CSS or JavaScript inside a page separately, use the CSS Minifier or the Code Beautifier. To turn finished HTML into a printable document, try HTML to PDF.
How to use the HTML Beautifier & Minifier
- 1
Paste your HTML
Replace the example in the Input HTML box with a full page or a fragment.
- 2
Choose the indent
Select 2 spaces, 4 spaces or Tab. The setting applies to Beautify.
- 3
Click Beautify or Minify
Beautify lays the markup out with indentation; Minify produces a compact version and shows the percentage saved.
- 4
Copy the result
Click Copy above the Output box.
What it can do
Block and inline awareness
Block elements get their own lines; inline elements and text stay together in readable lines.
Whitespace-sensitive content preserved
pre, textarea and title contents are copied exactly, and script and style code is never rewritten.
Handles omitted end tags
Lists, tables, paragraphs and options written without closing tags still indent sensibly.
Conservative minifier
Removes comments and collapsible whitespace but keeps the single spaces that separate inline content.
Indent options
2 spaces, 4 spaces or a real tab character.
Limitations
- It formats markup but does not validate or repair it. Mismatched or missing tags are passed through, so a broken page stays broken.
- Minify does not compress the JavaScript or CSS inside script and style tags.
- Both modes treat whitespace between block-level tags as insignificant. If your CSS displays such elements as inline-block, adding or removing that whitespace can shift spacing slightly.
- Template syntax such as PHP, Handlebars or JSX is not understood and may be indented oddly.
Privacy
The HTML you paste is processed by JavaScript in your browser and is not uploaded to FlexyPdf.
Frequently asked questions
Will beautifying change how my page looks?
Normally not. Line breaks and indentation are added only around block-level elements, where browsers ignore whitespace, and runs of spaces in text are collapsed to one, which is how browsers display them anyway. Text inside pre and textarea is not touched. The exception is elements your CSS shows as inline-block, where new whitespace between them can create a small gap.
Why is the code inside my script tag not reformatted?
The beautifier re-indents the whole block so it lines up with the surrounding HTML, but it doesn’t parse JavaScript. Paste the script into the Code Beautifier with JavaScript selected to format it.
Does minifying remove all comments?
All except Internet Explorer conditional comments, the ones starting with <!--[if, which some email templates still rely on. If you need another comment to survive, add it back after minifying.
Can it fix unclosed tags?
No. It indents according to the tags it finds and knows which end tags HTML lets you omit, but a genuinely missing </div> makes everything after it indent one level too deep. That shift can actually help you find where the tag is missing.
How is this different from the Code Beautifier?
The Code Beautifier uses this same HTML formatter, but only beautifies. This page adds the minifier, shows character counts and the percentage saved, and keeps input and output side by side.
Ratings & Reviews
Rate HTML Beautifier & Minifier
Help others by sharing your experience. Your rating is shown without your name.
More Developer Tools
View all →Code Beautifier
Re-indent JavaScript, SQL, JSON, HTML, CSS and XML code
JSON Formatter & Validator
Validate, pretty-print or minify JSON
XML Validator
Check that XML is well-formed and see where it breaks
Markdown Editor
Write Markdown with a live GitHub-style preview