HTML formatter
Paste messy or minified HTML and get it back indented, with inline scripts and styles tidied too.
Runs entirely in your browser
- Input
- 0
- Output
- 0
- Change
- 0%
Input up to about 10 MB. It re-indents markup and never rejects it, so it does not tell you if the HTML is invalid.
How to format HTML
- Paste your HTML into the box, or press Insert a sample.
- Pick the indent, a line-wrap length if you want one, and whether inline
<script>and<style>should be formatted. - The tidy version appears below as you type. Copy it or download it as an
.htmlfile.
Indenting HTML safely
Browsers collapse most whitespace in HTML, so a page can be written on one line or spread over a thousand and render the same. Templates, CMS output and minified bundles often produce markup nobody can read. A formatter puts block elements on their own lines and indents children under their parents, which makes mismatched or misplaced tags easy to see.
The details are where formatters go wrong. Void elements such as <br>, <img> and <input> never have a closing tag, so they must not increase the indent. Whitespace inside <pre> and <textarea> is displayed as typed, so it cannot be touched. And inline elements share a line with the words around them, because a line break there would add a visible space.
Scripts and style sheets embedded in the page are a separate language. The formatter can lay them out with the page's own indent, or leave them verbatim if you would rather keep a diff small or the code is already minified deliberately.
Tips
- Shrinking the stylesheet instead? The CSS minifier and beautifier works on standalone CSS.
- Converting a snippet to Markdown for a README? Use HTML to Markdown.
- Reviewing a template change? Format old and new, then run them through Text diff.
Questions
Is my HTML uploaded?
No. The formatting library is loaded from this site the first time you paste something, and the markup is processed in your browser only.
Does it change how the page looks?
It changes whitespace between tags, which browsers mostly collapse, so the page should look the same. The exception is whitespace that is visible: text inside <pre> and <textarea> is left exactly as typed for that reason.
Will it tell me if my HTML is broken?
No. It formats leniently and does not reject anything, so an unclosed tag will not raise an error; the indentation simply follows what it finds. To find structural mistakes, run the page through a validator.
What about the JavaScript and CSS inside the page?
By default the contents of <script> and <style> are formatted with the same indent. Untick Format inline script and style to leave them exactly as written.
How are inline tags like span and a handled?
Inline elements stay on the same line as their text where they fit, so a sentence containing <strong> is not broken into separate lines, which would add visible spaces.
What does wrap long lines do?
With a wrap length set, text that runs past the limit is broken onto a new line at a word boundary. Off keeps each text run on one line, however long.