Tool Logo

HTML Formatter

Indent messy or minified HTML so it's easy to read and edit.

0 characters

Loading tool…

How to use the html formatter

The formatter uses Prettier, the code formatter most web projects use, to indent your HTML consistently. CSS inside <style> and JavaScript inside <script> are formatted too. Prettier treats whitespace the way browsers do, so a space between inline tags like <b> and <i> is kept and the content of <pre> is left exactly as it was: the page looks the same, only the source gets tidier.

  1. Paste your HTML or upload an .html file.
  2. Choose the indentation and line width.
  3. Copy the formatted HTML.

When to use it

  • Minified pages

    Make a one-line HTML file readable before editing it.

  • Email templates

    Tidy nested tables and inline styles in HTML emails.

  • Code reviews

    Format HTML consistently so diffs show only real changes.

Frequently asked questions

Will formatting change how my page looks?

No. Prettier respects how browsers treat whitespace, so spaces between inline elements and the content of <pre> and <textarea> are kept. Only the source layout changes.

Does it format inline CSS and JavaScript?

Yes. CSS inside <style> tags and JavaScript inside <script> tags are formatted with the same rules.

What does it do with invalid HTML?

Prettier can format most real-world HTML. If the markup can't be parsed, for example an unclosed comment, you'll see the error and its line instead of a result.

Which formatter does it use?

Prettier 3, running entirely in your browser, with your choice of indentation and line width.

Is my HTML uploaded?

No. Everything runs in your browser; nothing you paste or upload is sent to our servers.