HTML Formatter
Beautify HTML with clean indentation, including embedded CSS and JavaScript. Powered by Prettier and processed in your browser.
Runs in your browser. Nothing is uploaded.
About the HTML Formatter
HTML from a CMS export, an email template or a page's view-source is often a single dense block, with inline styles and scripts mixed in. Indentation that follows the element nesting makes the structure visible: which elements are inside which, where a section ends, and where a tag was left unclosed.
The formatter uses Prettier and also formats CSS inside style tags and JavaScript inside script tags. Because whitespace between inline elements can change how text renders, it keeps such text intact rather than forcing every line to the chosen width. Warnings point to common mistakes, such as elements that are never closed, with their line and column.
How to use the HTML Formatter
- 1
Paste your markup, open an .html file, or load the sample. Pasting, opening a file or loading the sample runs it automatically.
- 2
Choose indent size and line width.
- 3
Press Format. Inline <style> and <script> blocks are formatted too.
- 4
Copy the result or download it.
Examples
<ul><li><a href="/a">A</a></li><li><a href="/b">B</a></li></ul><ul>
<li><a href="/a">A</a></li>
<li><a href="/b">B</a></li>
</ul>Good to know
- With “Fix broken tags” on, tags broken by a space after “<” (such as `< /p>`) are repaired before formatting and listed in the status bar. Other mistakes, such as an element that is never closed, are flagged as warnings with their line and column.
- Whitespace between inline elements is significant in HTML, so some lines may stay longer than the chosen width to avoid changing how the page renders.
- Template syntax (Blade, Handlebars, JSX) is not supported and may be reported as an error.
Frequently asked questions
Will formatting change how my page looks?
No. The formatter follows HTML whitespace rules so inline text renders the same. Only indentation and line breaks change.
Can I format a snippet instead of a whole page?
Yes. A fragment such as a single <div> or a list of <li> elements is formatted as it is, without adding <html>, <head> or <body> tags.
Is my code uploaded to a server?
No. Processing happens entirely in your browser, in a background thread. Your input is never sent to our servers or stored anywhere.
Related tools
More tools that pair well with this one.