HTML Formatter

1. Paste your HTML into the input box, or click Sample.
2. Choose your preferred indentation.
3. Click Format — Prettier will parse your HTML and re-emit it with proper nesting, indentation, and whitespace.
4. Copy the result into your editor or template file.

This formatter uses Prettier's HTML parser, which understands the full HTML5 grammar including void elements (<br>, <img>), self-closing tags, attributes with and without quotes, and embedded <script> and <style> blocks. It will correctly format embedded JavaScript and CSS alongside the HTML.

HTML (HyperText Markup Language) is the standard markup language for documents on the web. As HTML files grow and are passed between developers, indentation drifts, tags nest inconsistently, and whitespace becomes meaningless. An HTML formatter (also called a beautifier or pretty-printer) parses the document and re-emits it with a uniform style: one element per line, consistent indentation, normalized attribute spacing.

Formatting HTML is especially valuable when reviewing templates, debugging layout issues, or cleaning up markup generated by a CMS or page builder. This tool uses Prettier, the same formatter used by frontend teams at major companies, so the output matches industry conventions.

Yes. Prettier detects <style> and <script> blocks and formats their contents using the appropriate CSS and JavaScript parsers. Embedded TypeScript in <script type="module"> blocks is also handled.

Plain JSX-style HTML fragments will work, but full Vue Single File Components and Svelte files have their own dedicated Prettier parsers that are not loaded here. For those, run Prettier locally with the appropriate plugin.

Prettier is a formatter, not a validator. If your input is malformed (unclosed tags, mismatched nesting), Prettier will do its best to render it but may not produce the result you expect. Run your HTML through an HTML validator first if you suspect it is malformed.

No. Everything happens in your browser. Your HTML never leaves your device.