HTML Beautifier, Formatter & Minifier
An HTML beautifier adds consistent indentation and line breaks so code is easy to read; an HTML minifier removes everything the browser does not need so pages load faster. This tool does both, with presets for websites, Blogger themes and emails, and checks your HTML for unclosed tags, missing alt text and other problems, with line numbers. The sample below minifies from 696 to 635 bytes with the Safe preset.
Advertisement
How to beautify or minify HTML
- Paste your HTML into the left box, upload a file, or drop it onto the box. Whole pages, fragments and templates all work.
- Choose Beautify to make code readable, or Minify to make it small. For minifying, start with the preset that matches where the HTML will go.
- Read the HTML check under the result and select a line number to jump to each problem.
- Copy, download or preview the result. The preview runs with scripts disabled.
Minifier presets compared
Sizes are for the sample page above (696 bytes), produced by the same minifier that runs in the tool.
| Preset | Sample size | What it changes | Use it for |
|---|---|---|---|
| Safe | 635 B | Removes comments, collapses whitespace to one space, minifies inline CSS and JS, drops default attributes such as type="text/javascript". | Any website. The page renders exactly as before. |
| Maximum | 549 B | Also removes spaces between tags, optional tags such as </p> and <head>, and attribute quotes; sorts attributes and classes so gzip compresses better. | Static pages you test after minifying. |
| Blogger and XML | 635 B | Keeps tag case, closing slashes, quotes, the doctype and CDATA; puts scripts containing < or && back inside CDATA. | Blogger themes, XHTML and other XML templates. |
| 641 B | Keeps Outlook conditional comments (<!--[if mso]>) and quotes; leaves scripts alone. | Newsletters and transactional emails. |
Template tags are protected in every preset: <?php … ?>, <% … %>, {{ … }} and {% … %} reach the output unchanged.
What the HTML checker finds
The checker reads your code as written, so every problem comes with the line where it starts. It follows the HTML rules browsers use: a new <li> closes the previous one, and <p>, <td> and similar elements may leave out their end tag without an error.
| Check | Why it matters |
|---|---|
| Unclosed, mismatched and stray end tags | Browsers guess where the element ends, which shifts layout and nesting in ways that differ between pages. |
<div /> and other non-void self-closing tags | HTML ignores the slash, so the element stays open and swallows the content after it. |
Duplicate id | Breaks anchor links, labels, ARIA references and getElementById. |
Images without alt | Screen readers and Google Images rely on it. |
Images without width and height | The browser cannot reserve space, so content jumps when the image loads: a Cumulative Layout Shift problem in Core Web Vitals. |
| Links and buttons with no text | They have no accessible name, and an empty link passes no anchor text to search engines. |
| Form fields without a label | Screen reader users cannot tell what to type. |
Missing <title>, viewport, lang, <h1> or description | Search results, mobile layout and accessibility depend on them. Skipped for Blogger templates, which add them when the page is built. |
| Obsolete tags, inline handlers, many inline styles | <center> and <font> are not part of HTML any more; onclick attributes block a strict Content Security Policy. |
Advertisement
Why the Safe preset keeps one space
Whitespace between inline elements is visible. In <a>Home</a> <a>Blog</a> the space separates the links; remove it and they run together as "HomeBlog". The same happens between inline-block buttons and images. A minifier cannot know your CSS, so Safe collapses every run of whitespace to a single space instead of deleting it. That saves almost as much and never changes the layout. Maximum deletes it, which is only safe when your CSS uses flexbox or grid for those gaps.
Using it with Blogger, WordPress and email
Blogger
To read a theme, go to Theme → ⋮ → Edit HTML, copy everything and choose Beautify. To minify, choose the Blogger and XML preset, back up the theme first (Theme → ⋮ → Backup), then paste the result back and save. Keep the Variable definitions comment inside <b:skin>: the Theme Designer reads its <Variable> tags, so CSS inside CDATA is left unminified on purpose. For post HTML, Blogger's own editor reformats code when you switch views, so paste minified HTML in HTML view and publish without switching back.
WordPress
Beautify is useful for reading a theme template or the HTML of a block. To minify a live WordPress site, use your caching plugin's HTML minify option rather than editing theme files, so updates do not overwrite your changes.
Gmail clips messages larger than about 102 KB and hides the rest behind "View entire message". The Email preset keeps Outlook's conditional comments and quoted attributes, which many email clients need.
Tip: fix every image the checker lists without width and height. It is one of the most common causes of a poor CLS score in PageSpeed Insights.
Frequently asked questions
What does an HTML beautifier do?
An HTML beautifier rewrites code with consistent indentation and line breaks so nested elements are easy to follow. It does not change what the page shows. This one also formats CSS inside style tags and JavaScript inside script tags, and leaves template tags such as PHP, Handlebars and Jinja untouched.
What is the difference between an HTML formatter, beautifier and minifier?
Formatter and beautifier mean the same thing: they add indentation and line breaks to make HTML readable. A minifier does the opposite: it removes comments, whitespace and optional characters to make the file smaller and faster to download. Keep the beautified version for editing and publish the minified one.
Does minifying HTML improve page speed?
Yes, a little. Minified HTML downloads and parses faster, which helps First Contentful Paint and Largest Contentful Paint, especially on slow mobile connections. Savings are usually 10 to 25 percent before compression and smaller after gzip. Large images, render-blocking scripts and unused CSS usually matter more, so fix those too.
Can minifying HTML break my layout?
It can, if spaces between inline elements are removed: two links or inline-block buttons can end up touching. The Safe preset avoids that by keeping one space wherever there was whitespace, so the page renders exactly as before. The Maximum preset removes those spaces and optional tags too, so check the page after using it.
How do I find unclosed tags in HTML?
Paste the HTML and read the HTML check under the result. It lists every element that is never closed, every end tag that closes the wrong element and every end tag without an opening tag, each with its line number. Select the line number to jump to that place in your code. Elements whose end tag HTML allows you to leave out, such as p and li, are not reported.
Can I minify a Blogger theme?
Yes, with the Blogger and XML templates preset. It keeps tag case, closing slashes and quotes so the theme stays valid XML, keeps CDATA sections, and wraps any script containing a less-than sign or && in CDATA so Blogger can save it. Back up the theme first, and keep the Variable definitions comment in b:skin unminified because the Theme Designer reads it.
Is my HTML uploaded to a server?
No. The beautifier and minifier run in a Web Worker in your browser, so your code never leaves your device. The preview is a sandboxed frame with scripts disabled, so pasted code cannot run. After the first use, the tool also works offline.
Can I minify HTML emails?
Yes. The Email preset keeps Outlook conditional comments, keeps attribute quotes and does not touch scripts. Gmail clips messages larger than about 102 KB, so minifying a long newsletter can keep it from being cut off.
Share this HTML beautifier
Advertisement
Related tools
Built with js-beautify and html-minifier-terser (MIT). Licences.