My Tool Studio
Developer Tools·2 min read

How to Format Messy or Minified HTML

Minified or hand-mangled HTML is hard to read and harder to edit. The HTML Beautifier takes a one-line page, a CMS export or an email template and puts every nested element on its own line with consistent indentation. Paste the markup, upload an .html file or load a live page's source by URL. Formatting runs in your browser, so private templates stay on your machine.

{"name": "site","tags": ["fast","clean"],"active": true}Beautified

What beautifying does

Cramped markup becomes a readable tree.

Click Beautify and the markup is rebuilt with one element per line, indented by nesting. The code inside style and script tags is indented too, unless you untick Format inline CSS and JavaScript to keep those blocks as written. Inline style attributes stay on one line, and content inside pre and textarea is not reformatted.

Beautifier, formatter and prettifier are three names for the same job. None of them change what the page shows. The one rare exception is inline-block elements placed side by side, where a new line between them can add a small visible gap.

Options and files

Match your code style.

Set Indent to 1, 2, 3, 4 or 8 spaces or Tab, and wrap long lines at anything from 40 to 160 characters, or not at all. The Attributes menu decides how elements with many attributes break: only when a line is too long, or one attribute per line, which makes long class lists easy to review in a diff. Script and style indent sets where code inside those tags starts.

Click Upload .html to load a .html, .htm or .txt file, or type a URL and click Load page source. Both are formatted straight away. Download .html saves the result. Turn on Live mode and the output follows your edits, so you can compare styles without clicking again.

Fixing inconsistent indentation

A useful side effect.

Because every line is indented again from scratch, mixed tabs and spaces disappear. If the result looks wrongly nested, you probably have an unclosed tag, and the indentation shows where it starts. That makes the formatter a quick way to trace a layout bug in a page you did not write.

Preview the page, but validate elsewhere

Tidy is not the same as correct.

Tick Show rendered preview to see the page under the panes in a sandboxed frame with scripts blocked. The Width menu shows it at phone (375 px), tablet (768 px) or desktop (1280 px) width, a quick check of a responsive layout.

The beautifier formats whatever you give it, including invalid HTML, and it does not report problems. When you need a proper check, use the W3C Markup Validation Service.

Related tools

For the other half of the job.

For standalone files, the CSS Beautifier and JS Beautifier have more options than the inline formatting here. When you are done editing, Minify instead squeezes the same input on this page, and the HTML Minifier adds inline CSS and JavaScript minifying for production. Comments a minifier removed earlier cannot be restored, so keep your source files.

Try it now

Open HTML Beautifier

The tool is one click away. No sign up, no upload, no payment.

Open HTML Beautifier