HTML Formatter
Formats an HTML string or file with your desired indentation level. Inline content in elements such as span and div is kept on the same line.
Loading tool...
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.
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. - Inline elements (
a,span,b,strong,em,i,code,img,label) stay in the text flow so that the rendering is not changed. - 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.
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. |
| Preserve existing line breaks | Blank lines you inserted between sections are kept. |
| Indent head and body | Indents the children of <html>, <head> and <body>. |
| Keep inline elements unformatted | Leaves inline elements inside their surrounding text. |
HTML minifier rules
The Minify HTML button removes everything the browser does not need:
- Runs of whitespace in text are collapsed to a single space.
- Whitespace next to block-level and structural tags is removed entirely.
- HTML comments are removed, except conditional comments.
- The content of
<pre>,<textarea>,<script>and<style>is kept byte-for-byte. - Whitespace inside tags is normalized.