Does this send my markup anywhere?

No. Formatting runs entirely in your browser using Prettier's bundled HTML parser.

Does it format embedded CSS and JavaScript?

Yes. Prettier formats ` ` and ` ` blocks using its CSS and JavaScript formatters too.

Does it reorder attributes on an element?

No. Prettier prints attributes in the order they appear in the source; only whitespace and line breaks are added, not attribute order.

Does it validate my HTML for correctness?

No. It only reformats markup that already parses successfully; it doesn't check semantic issues like duplicate IDs or missing alt text. Use the HTML Validator for that.

HTML Formatter - Format HTML Online

Overview

Introduction

HTML pulled from a server response or a build tool's output often arrives as a single dense line, making its structure hard to follow.

This tool reformats any HTML document into consistently indented, nested markup, entirely in your browser.

What Is HTML Formatter?

An HTML formatter built on Prettier's HTML parser, which reflows your markup so nested elements are indented to match their depth.

It also formats any embedded CSS and JavaScript inside `<style>` and `<script>` tags.

How HTML Formatter Works

Prettier parses the document into a tree of elements and re-prints it with one element per line, indented by nesting depth.

Malformed markup (an unclosed tag, for example) causes parsing to fail with the exact line and column reported.

When To Use HTML Formatter

Use it when inspecting a minified page's source or cleaning up markup exported from a design or CMS tool.

It's also useful before code review, so reviewers see structure rather than a single unbroken line.

Often used alongside HTML Minifier, HTML Validator and CSS Formatter.

Features

Advantages

Runs entirely client-side.
Formats embedded CSS and JS alongside the markup, not just the HTML tags.
Preserves attribute order and values, so only whitespace and structure change, never the semantic markup.

Limitations

Whitespace-sensitive inline content (like `<pre>`) is preserved as-is, which is intentional but can look unformatted.

Examples

Minified markup

Input

<div><p>Hello</p><span>World</span></div>

Output

<div>
  <p>Hello</p>
  <span>World</span>
</div>

Each nested element gets its own line, indented to match its depth in the document.

Best Practices & Notes

Best Practices

Format HTML before committing templates, so diffs reflect real structural changes.
Pair with the HTML Validator for a syntax-only check.

Developer Notes

Formatting is delegated to Prettier's `format()` API with the `html` parser, so behavior matches the `prettier` CLI exactly.

HTML Formatter Use Cases

Cleaning up minified page source for debugging
Normalizing markup pasted from a CMS export or LLM response
Reviewing HTML from an email template builder before sending

Common Mistakes

Expecting whitespace inside `<pre>` or `<textarea>` to be reformatted; it's preserved verbatim by design.
Expecting attributes to be reordered or alphabetized; Prettier keeps them exactly where they were written.

Tips

If formatting fails, the reported line and column point at the exact unclosed or malformed tag.
You can paste a standalone fragment, not just a full document; Prettier's HTML parser doesn't require a wrapping `<html>` or `<body>`.

HTML Formatter