HTML Formatter
Format and indent HTML so it is easy to read.
Runs in your browser Your input never leaves your device.
Report a problem with this tool
About this tool
Paste HTML into the box and the tool re-indents it as you type, using the js-beautify library. Pick 2 or 4 spaces for the indent. Existing line breaks are preserved and long lines are not wrapped, so the output stays close to what you wrote while nesting becomes visible. It is a formatter, not a validator: it does not fix unclosed tags or report errors, and it will format whatever you give it. Everything runs in your browser, so your markup is never sent to our servers. Use Copy to take the result.
How to use it
- Paste your HTML into the input box.
- Choose an indent of 2 or 4 spaces.
- Read the formatted output, which updates as you type.
- Press Copy to use it.
Example
<div><p>Hello <b>world</b></p><ul><li>One</li><li>Two</li></ul></div>
<div>
<p>Hello <b>world</b></p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>What the formatter changes
- Indentation
- Each nested element is indented one level, by 2 or 4 spaces, so you can see which tag sits inside which.
- Block elements
- Tags such as div, ul, li and p go on their own lines.
- Inline elements
- Tags such as b, a and span stay inside the line of text they belong to.
- Script and style
- JavaScript inside script tags and CSS inside style tags are re-indented too.
- Pre and textarea
- Their content is left exactly as it is, because whitespace there is shown on the page.
- Line breaks
- Breaks you already had are kept and long lines are not wrapped.
Formatting a whole HTML page
- To format a page you can see in the browser, press Ctrl+U (Cmd+Option+U on a Mac) to view its source, then copy all of it.
- View source shows the HTML the server sent. If the page is built by JavaScript, open developer tools, right-click the html element in the Elements panel and choose Copy, then Copy outerHTML, to get the HTML as it is now.
- Paste it here, pick the indent and copy the result.
Format, validate or minify?
Formatting only changes whitespace to make code readable. It does not tell you whether the HTML is correct, so a missing closing tag is still missing after formatting. If the indentation looks wrong in one place, that is often where a tag is unclosed.
Minifying is the opposite of formatting: it removes whitespace and comments to make the file smaller for production. Use HTML Minifier for that. A common workflow is to format to read and edit, then minify before you publish.
Common problems
- Broken markup is still formatted oddly
- The tool does not repair HTML. Fix unclosed or mismatched tags first and the indentation will line up.
- Inline elements stay on one line
- Inline tags such as b, a and span are kept within their line on purpose so text does not change.
- Extra blank lines remain
- Line breaks you already had are preserved, including blank lines, so remove them yourself if you want a tighter result.
Frequently asked questions
Does formatting HTML change how the page looks?
Usually not. Browsers collapse runs of spaces and line breaks between tags, and the formatter keeps inline text on its line and leaves pre and textarea content alone. Check spacing around inline-block elements, where whitespace between tags can show as a small gap.
Should I indent HTML with 2 or 4 spaces?
There is no rule. Google's HTML/CSS style guide uses 2 spaces, which keeps deeply nested markup narrower. Match whatever your project already uses.
Can it fix broken HTML?
No. It formats what you give it and does not add missing tags or report errors.