HTML Formatter
The HTML formatter re-indents markup so nesting is visible, keeping inline elements on one line and leaving the contents of <pre>, <textarea>, <script> and <style> untouched. Attributes, comments and doctype are preserved exactly.
HTML
Formatted HTML
Your result will appear here.
Not sure where to start? Use Load example.
Results update automatically and are calculated on your device. Nothing you type is sent to a server.
Runs in your browser. Processing happens entirely in your browser. Nothing you enter is sent to Delimiter.live.
How to use the HTML Formatter
- Paste your HTML, or load an .html file.
- Choose an indent width.
- Copy or download the formatted markup.
Example
Input
<div><p>Hi</p></div>
Output
<div> <p>Hi</p> </div>
Common use cases
- Reading minified markup pulled from a live page.
- Tidying HTML pasted out of an email template or a CMS editor.
- Finding an unclosed tag by making the nesting visible.
Limitations and things to watch for
- Content inside <pre>, <textarea>, <script> and <style> is left byte for byte, because whitespace there is significant.
- The formatter does not repair broken markup. An unclosed tag will produce visibly wrong indentation, which is often exactly how you find it.
- Inline elements such as <strong> and <a> stay on the same line as their surrounding text by default, since breaking them would introduce whitespace the browser renders.
Frequently asked questions
Does it fix invalid HTML?
No. It formats what you give it. Broken nesting shows up as odd indentation, which makes the problem easy to spot, but you have to fix the markup yourself.
Will it break my inline JavaScript or CSS?
No. The contents of script and style elements are preserved exactly. Use the dedicated CSS and JavaScript formatters if you want those reformatted.
Why did my <pre> block keep its original spacing?
Because whitespace inside <pre> is rendered literally. Re-indenting it would change how the page looks, so it is deliberately left alone.