Why HTML is minified
Many sites serve HTML with the extra spaces, line breaks and comments removed, to save bandwidth. Page builders, templates and "view source" often give you the whole page on one or a few very long lines. A beautifier puts the structure back, so a person can follow it.
How to unminify HTML
- Copy the HTML. In a browser you can use View Source, or the Elements panel of the developer tools, and copy the markup you need.
- Paste it in the box. The tool shows a note when the input looks minified.
- Read the result, or copy it into your editor.
What comes back and what does not
The structure comes back in full: every element is on its own line and indented by its depth, attributes are listed, and style tags are laid out. What a minifier removed cannot return. Comments are gone, optional quotes around attribute values may be missing, and the original line breaks and indentation of your source are lost. Where a tool built the page from a template, the template is the better thing to edit.
Typical uses
- Reading the code of a page to understand how an element was built.
- Reviewing an email template or a snippet from a CMS.
- Debugging markup that a script or a plugin generated.
- Cleaning up copy and pasted HTML before you put it in your project.
Beautifier options
You can choose the indent, the line width, how long tags are wrapped, the style of void tags and quotes, and whether to format the CSS inside style tags. The same options are available in the HTML formatter.
To make the code smaller again, use the HTML minifier. To read it with line numbers and colors, use the HTML pretty print view. You may also want the CSS beautifier and the JavaScript beautifier for the code inside the page. The HTML formatting guide explains the conventions.