HTML Formatter & Beautifier
Formats an HTML string or file with your desired indentation level. Inline content in elements such as span and div is preserved as valid content.
Result
About the HTML formatter
The formatter re-indents your markup so that every block-level element starts on its own line, nested one level deeper than its parent. Nothing is sent to a server: the whole job is done in your browser, so you can safely paste pages that contain private data. The output is highlighted and can be copied, downloaded or opened in a new window.
What is preserved
- The content of
<pre>and<textarea>elements is never touched: whitespace inside them is significant. - The code inside
<script>and<style>elements is beautified with the JavaScript and CSS beautifiers and indented relative to its parent tag. - Inline elements (
a,span,b,strong,em,i,code,img,label,small,sub,sup,br…) stay in the text flow so that the rendering is not changed. Uncheck Keep inline elements unformatted to put every element on its own line instead. - Comments, conditional comments, the doctype and processing instructions are kept as-is.
- Attribute quotes, attribute order and the case of tag names are left untouched: the formatter changes whitespace only.
Options
| Option | Effect |
|---|---|
| Indentation level | Number of spaces (or a tab) added for each nesting level. |
| Maximum line length | When a line would exceed this length, it is wrapped at the next attribute or word boundary. No wrap keeps long lines intact. |
| Preserve existing line breaks | Blank lines you inserted between sections are kept (at most two in a row). When unchecked, all blank lines are removed. |
| Indent <head> and <body> | Indents the children of <html>, <head> and <body>. Many style guides leave those at column 0 to save one level of indentation. |
| Keep inline elements unformatted | Leaves inline elements inside their surrounding text. Unchecking it produces a strict "one tag per line" layout, which is easier to diff but may add whitespace between inline elements. |
Example
<div class="card"><h2>Title</h2><p>Some <b>bold</b> text.</p><ul><li>One</li><li>Two</li></ul></div>becomes, with three spaces per level:
<div class="card">
<h2>Title</h2>
<p>Some <b>bold</b> text.</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>HTML minifier rules
The Minify HTML button does the opposite job: it removes everything the browser does not need, which reduces the size of the page and speeds up its download. The minifier is conservative and only applies transformations that cannot change the rendering:
- Runs of whitespace (spaces, tabs, line breaks) in text are collapsed to a single space, exactly as a browser would render them.
- Whitespace next to block-level and structural tags (
div,p,ul,li,table,tr,td,h1–h6,head,body,meta,link…) is removed entirely. A single space between two inline elements (<b>a</b> <i>b</i>) is kept because it is visible. - HTML comments are removed, except conditional comments (
<!--[if IE]> … <![endif]-->) which old versions of Internet Explorer interpret. - The content of
<pre>,<textarea>,<script>and<style>is kept byte-for-byte. - Whitespace inside tags is normalized:
<a href = "x" >becomes<a href="x">. Attribute values are never modified. - The doctype is kept; it is required for standards mode.
The size of the original and of the minified document, and the percentage saved, are displayed above the result.