HTML beautifier
Minified HTML, one-line exports and view-source dumps go in. Indented, readable markup comes out.
What a beautifier is for
Beautifying reverses compression. It takes markup that a machine wrote for another machine and lays it out for a person.
Beautifier, formatter, pretty printer — the same job
The three names come from different traditions. Pretty printer is the oldest, from compiler literature, where it meant printing a parse tree back out in readable form. Beautifier arrived with JavaScript tooling in the 2000s. Formatter is the term Prettier and gofmt made standard. They all describe the same operation: take code, print it again with consistent whitespace.
If you have landed here looking for a beautifier specifically, the usual reason is that you are holding something that has been through a build step. Minified HTML, HTML pulled out of a JavaScript bundle, HTML copied from a browser's view-source on a production page. Beautifying is how you make it readable again.
A minified page, beautified
This is what a production build usually looks like when you find it, and what you get back.
<div class=card><a href=/p/1 class=link><img src=t.jpg alt="Thumbnail"><h3>Title</h3></a><p class=meta>2 min read</p></div><div class="card">
<a href="/p/1" class="link">
<img src="t.jpg" alt="Thumbnail">
<h3>Title</h3>
</a>
<p class="meta">2 min read</p>
</div>Notice that the unquoted attribute values came back quoted. HTML5 allows class=card, and
minifiers strip the quotes to save two bytes per attribute, but quoted values are what every style guide and
every other developer expects to read.
When beautifying is the wrong move
Two cases where you should leave the file alone.
Build output you are about to ship. If the file is generated by your bundler, beautifying it undoes work your build did on purpose. Format the source, not the artefact.
Files with meaningful whitespace you have not audited. Beautifying preserves
<pre> and <textarea> contents, but a page that relies on the single
space browsers render between two inline elements on separate lines can shift by a pixel or two. This is rare
and usually invisible, but if you are formatting a pixel-critical email template, check the result in a
preview before sending.
Questions about this tool
What is the difference between beautify and format?
Nothing. Different names for the same operation. This site uses them interchangeably because people search for both.
Can I beautify HTML that has inline CSS and JavaScript?
Yes, and the code inside those blocks is left alone. The <style> and <script> tags get placed and indented like any other element, but their contents are passed through byte for byte. Reformatting JavaScript with an HTML indenter breaks template literals and regular expressions, so it is not attempted.
Does beautifying make my page slower?
Marginally larger, yes; meaningfully slower, no. Indentation adds bytes, and those bytes compress almost perfectly — gzip and brotli are extremely good at runs of spaces. On a server with compression enabled, the difference between formatted and minified HTML over the wire is usually a fraction of a percent. Minify for other reasons if you like, but not because indentation is a performance problem.
Will it fix my broken tags?
It will not rewrite them, but it will make them obvious. Switch to Validate and each unclosed or mismatched tag is listed with the line it opened on.
Related tools
HTML Formatter
Indent and structure any HTML file.
OpenHTML Pretty Printer
Pretty-print HTML with the indent you want.
OpenHTML Minifier
Strip whitespace and comments from HTML.
OpenHTML Validator
Find unclosed tags and broken nesting.
OpenHTML Code Cleaner
Tidy exports from CMS and email builders.
OpenHTML to JSX
Convert HTML into React-ready JSX.
OpenLearn the why, not just the how
Longer reading on formatting, indentation and minification.