HTML Minifier & Beautifier
Minify HTML for production or beautify ugly HTML for reading.
Written by Anil Gautam · Updated
What does minifying HTML remove?
Minify mode deletes every HTML comment (the doctype line is kept), sets aside the contents of pre, textarea, script and style elements, removes all whitespace between a closing > and the next <, turns every remaining run of whitespace into a single space, and then puts the set-aside elements back byte for byte. A label above the output compares the size before and after in bytes of UTF-8 text, so a character such as é counts as two. The sample page in the input box shrinks from 141 bytes to 112, about 21 percent, and all of the saving comes from line breaks and indentation between tags.
Beautify mode starts a new line wherever two tags touch and indents two spaces for each element that is still open. Void elements such as img, br, input, meta and link do not add a level, and neither does a line that opens and closes the same tag. So <ul><li>One</li><li>Two</li></ul> comes back as four lines with both list items indented under ul, and running Beautify on the minified sample restores its original layout exactly. Text that sits between tags stays on the line of the tag before it, and line breaks already in the input are kept and re-indented.
What can break when you minify HTML?
The contents of <script>, <style>, <pre> and <textarea> elements are left exactly as written, so an inline script keeps its line breaks and its // comments, and preformatted text keeps its layout. The minifier does not shrink the code inside those elements. To make inline scripts and styles smaller, minify them separately with the JavaScript Minifier & Beautifier and the CSS Minifier & Beautifier.
Deleting whitespace between tags can also delete a space the reader sees. Two links written as <a href="/">Home</a> <a href="/about">About</a> are joined with no gap and display as HomeAbout. A line break between two words of text becomes a single space, so a paragraph wrapped across lines still reads correctly. Read the visible text of the result once before you publish it. If you only need the words of a page without any markup, Strip HTML Tags fits that job better.