About the HTML Formatter
This page runs Prettier 3 (standalone build) in your browser with its HTML parser, plus the CSS and Babel plugins so that <style> blocks, <script> blocks and event-handler attributes are formatted with the same rules as standalone files. Elements are broken over lines when they exceed the print width, and long attribute lists wrap one attribute per line.
HTML formatting is subtle because whitespace can be visible: the space between <b>a</b> <i>b</i> renders on screen. The Whitespace option maps to Prettier's htmlWhitespaceSensitivity. Respect CSS display (default) only adds or removes whitespace where the element's default CSS display makes it invisible, Strict treats all whitespace as significant, and Ignore reformats freely — use it only when you control the CSS.
Content inside <pre> and <textarea> is preserved. The formatter needs parseable markup; badly broken HTML (for example an unclosed <div tag) is reported with the line and column. Vue single-file components and Angular templates have dedicated Prettier parsers that are not included here.
How to use it
- Paste HTML or open an .html file.
- Set indentation, print width and whitespace handling.
- Wait a moment for the formatter to load the first time.
- Copy the formatted markup or download it.
Frequently asked questions
Why did Prettier put a closing > on the next line?
> of a tag to the next line. It looks odd but keeps rendering identical. Choose Whitespace: Ignore if your layout does not depend on inline whitespace.Does it format CSS and JavaScript inside the HTML?
<style> content is formatted with the PostCSS parser and <script> content with Babel, using the same indentation settings.