HTML Formatter

How to format HTML

1. Paste your HTML, or click Open a file to load an .html or .htm file (up to 10 MB).
2. Choose the Indentation (2 spaces, 4 spaces or a tab) and whether to Wrap lines at 80 or 120 characters.
3. Tick Indent and if you want them indented inside <html>, and Remove comments to drop <!-- … --> comments.
4. Click Format (beautify) for readable code, or Minify for the smallest safe version.
5. Copy or download the result. The status line shows the size before and after.

The result is displayed as plain text in the output box. Your HTML is never rendered or run on this page, so scripts in the code you paste cannot do anything.

Beautify: readable, consistently indented HTML

Format (beautify) uses js-beautify, the formatter behind many code editors:

• block elements go on their own lines, indented by nesting depth, while inline elements such as <a>, <b> or <span> stay within the text;
• the contents of <script> and <style> are formatted as JavaScript and CSS;
• <pre> and <textarea> are left exactly as written, since their whitespace is visible;
• consecutive blank lines are reduced to one;
• with a wrap width, long lines of text and long attribute lists are wrapped.

Beautifying does not fix broken markup: an unclosed <div> stays unclosed, and the indentation that follows it shows where the problem is.

Minify: smaller HTML without changing the page

Minify uses a deliberately conservative approach:

• runs of spaces, tabs and line breaks in text become a single space, just as the browser displays them;
• whitespace next to block-level and head elements (<div>, <p>, <li>, <td>, <meta>, <br>…) is removed, because it is never rendered;
• a single space between inline elements is kept, so <b>big</b> <i>world</i> does not turn into “bigworld”;
• comments are removed when Remove comments is ticked, except conditional comments (<!--[if IE]>) and comments starting with <!--!;
• the contents of <script>, <style>, <pre> and <textarea> are never touched, and attribute values are kept exactly, quotes included.

It does not remove optional closing tags, rewrite attributes or compress inline JavaScript and CSS: those optimisations save a little more but can break pages. For most pages, HTTP compression (gzip or Brotli) saves far more than any minifier, so minification is most useful for HTML embedded in e-mails, templates or JavaScript strings.