HTML formatter
Format HTML with Prettier, including CSS in style tags and JavaScript in script tags. Choose 2 spaces, 4 spaces or tabs. Runs entirely in your browser.
About HTML formatter
The HTML formatter reindents markup so the nesting of every element is visible at a glance. It runs Prettier, the formatter used in many front-end projects, directly in your browser, so the output matches what Prettier produces in an editor with its default settings and the indentation you choose.
Prettier also formats the CSS inside <style> elements and the JavaScript inside <script> elements, and breaks long tags so their attributes fit within 80 characters. Use it on templates copied from a CMS, markup generated by a page builder, or minified HTML you need to read before editing.
How to use HTML formatter
- Paste HTML into the input box, or open or drop an .html file.
- Choose 2 spaces, 4 spaces or Tabs for the indentation.
- Wait a moment the first time while the formatter loads, then review the output.
- Copy the formatted HTML or download it as an .html file.
Features
- Formats with Prettier’s HTML parser and default options, apart from the indentation you choose.
- Formats embedded CSS in <style> elements and JavaScript in <script> elements.
- Puts attributes on separate lines when a tag would exceed 80 characters.
- Respects whitespace-sensitive inline elements, so it does not add visible spaces between words and links.
- Loads Prettier only when needed and runs it in a background worker.
Common uses
- Reading HTML copied from a CMS, email builder or page builder.
- Cleaning up templates before committing them to a repository.
- Inspecting minified markup from a production page.
- Preparing readable code snippets for documentation or tutorials.
Tips
- Line breaks that look odd, such as a closing > at the start of a line, are deliberate. Prettier places them where adding whitespace would change how inline content renders.
Frequently asked questions
Does the HTML formatter change how my page looks?
It should not. Prettier is whitespace-aware: it only adds or removes whitespace where browsers ignore it, based on each element’s default CSS display. That is why inline elements are sometimes wrapped in unusual ways instead of being moved onto separate lines.
Does it format CSS and JavaScript inside the HTML?
Yes. The contents of <style> elements are formatted as CSS and JavaScript in <script> elements is formatted as JavaScript, using the same indentation setting as the rest of the document.
Can it format Vue, Angular, Handlebars or JSX templates?
It uses Prettier’s plain HTML parser, so standard HTML works best. Template expressions inside text, such as {{ name }}, are usually kept as written, but Vue single-file components, JSX and Handlebars blocks are not parsed as their own languages and may fail or format poorly.
Why does formatting fail with a syntax error?
Prettier stops when the markup cannot be parsed reliably, for example when a closing tag does not match any open element. The message names the problem and its position; fix it in the input and the formatted output appears.
What is the difference between formatting and minifying HTML?
Formatting adds indentation and line breaks so people can read and edit the markup. Minifying removes comments and unnecessary whitespace to reduce the file size for delivery. Use the HTML minifier for the opposite direction.
Is my input uploaded?
Tools run in your browser. Files, text and results are not uploaded to our servers and are cleared when you leave the tool.
Your privacy comes first
Tools run in your browser. Files, text and results are not uploaded to our servers and are cleared when you leave the tool.