HTML Formatter
Format and beautify HTML.
Loading…
About HTML Formatter
Markup copied from view-source, an email template or a minified build often sits on a few very long lines. Paste it, pick an indent of two or four spaces and press Format / Beautify: nested elements are indented, lines wrap at 120 characters, and the contents of pre, textarea, script and style elements are left exactly as written so whitespace-sensitive text and inline code are not disturbed. Only whitespace changes. The markup is neither repaired nor validated.
Features
- Indents nested elements with two or four spaces
- Wraps long lines at 120 characters
- Leaves the contents of pre, textarea, script and style untouched
- Works on whole documents and on fragments
- Formatting is done by the js-beautify library inside your browser
Limitations
- Only whitespace changes: unclosed tags, missing quotes and other mistakes are not fixed or reported, and the Valid marker just means the formatter finished.
- Inline CSS and JavaScript inside style and script elements are left as written, not formatted.
- The choices are two or four spaces, with no tabs, and the wrap width of 120 characters cannot be changed.
How it works
- Paste the HTML, a full page or just a fragment, into the HTML Input panel.
- Choose two or four spaces from the Indent menu in the middle column.
- Select Format / Beautify.
- Read the Formatted HTML panel, then use Copy Output to take it or Clear All to start again.
Example input
<div><p>Hello<span>World</span></p></div>Frequently asked questions
- Script and style contents are deliberately left alone so inline code is never altered. Copy that code into the JavaScript Formatter or the CSS Formatter, format it there, and paste it back.
- No. A snippet like <div><p>Hello</div> is re-indented but still has the open paragraph. The green Valid mark appears whenever formatting completes, so it says nothing about whether the HTML is correct.
- It can, rarely. Browsers treat whitespace between inline elements as a space, so adding or removing line breaks there can shift spacing by a character. Keep the original, and compare the rendered page before swapping files.
- No. The Indent menu offers two or four spaces only. If your project uses tabs, format here and then convert the indentation spaces in your editor.