HTML Formatter & Minifier
Beautify HTML with clean indentation or minify it to one line — pre and textarea content is always kept exactly, and inline script/style can be reformatted.
<div class="card"> <!-- greeting --> <h2>Hi</h2> <p>Welcome to <a href="/">MakerBox</a>.</p> </div>
Beautify re-indents the JavaScript in <script> and the CSS in <style> unless you turn that off; <pre> and <textarea> are always left as they are, and minify preserves all four, along with conditional <!--[if]--> and important <!--! comments.
Beautify or minify
Paste HTML and switch between two modes. Beautify re-indents the markup by nesting: each block element starts its own line, while text and the inline elements in it, such as a link or bold text, stay together on one line the way the browser reads them, which makes the document structure easy to read. Minify strips comments and collapses insignificant whitespace into a single compact line to shrink file size. The content of <pre> and <textarea> is preserved exactly in both modes, and minify preserves <script> and <style> too. Beautify also re-indents the JavaScript in <script> and the CSS in <style>, changing their spacing and nothing else, unless you clear the Format inline JS/CSS checkbox; void elements like <br> and <img> are handled without adding stray nesting. Beautify can also wrap long lines at a width you pick, breaking only at a space in the text and never inside a tag, and put each attribute of a tag that has more than one on a line of its own; both are off unless you choose them.
When to use each mode
Use beautify when you have received compressed or single-line HTML and want to read or edit it, or to tidy up markup before committing it. Use minify to reduce the size of a snippet for production or an email template where every byte counts. Because everything runs in your browser, you can paste proprietary markup without it ever being uploaded. Note that minification here is conservative — it focuses on whitespace and comments and never rewrites your tags or attributes.
Frequently asked questions
Does minifying break my inline scripts or styles?
No. Minify preserves the contents of <script>, <style>, <pre> and <textarea> verbatim. Beautify leaves pre and textarea alone too, but it does re-indent the JavaScript and CSS inside script and style tags unless you clear the Format inline JS/CSS checkbox — that changes their spacing only, not what the code does.
What does beautify do exactly?
It re-indents the HTML by nesting, with consistent indentation, without changing which tags or attributes are present: each block element starts its own line, and text stays on one line with the inline elements around it. You can choose 2 spaces, 4 spaces, or a tab for the indent, have long lines wrapped at a width you pick, and put each attribute on its own line.