Skip to content
Devtools 360

Format and Beautify HTML Code

Clean up minified, generated or hand-edited HTML into consistently indented markup. The formatter uses Prettier, so inline <style> and <script> blocks are formatted as CSS and JavaScript as well.

Runs in your browserFree · No sign-up

How to format HTML

  1. Paste HTML, click Sample, or open an .html file up to 5 MB.
  2. Choose indentation (2 spaces, 4 spaces or tabs), line width and how whitespace between inline elements is handled.
  3. The formatted HTML appears as you type; parse errors show the line and column with an excerpt.
  4. Copy the result or download it as formatted.html.

Supported formats

Input
HTML, .html file
Output
Formatted HTML
Maximum size
5 MB per file (limited by your device's memory)

Whitespace sensitivity explained

In HTML, a line break between two inline elements renders as a space, so reformatting can change what users see. The default "css" mode respects each element's CSS display value and is safe for most pages. "strict" treats all whitespace as significant, and "ignore" re-flows freely, which produces tidier code but can add or remove visible spaces.

Benefits

  • Industry-standard Prettier output, identical to what many editors and CI pipelines produce.
  • Formats embedded CSS and JavaScript in the same pass.
  • Prettier is downloaded only when you first format, keeping the page light.

Limitations

  • Template syntax such as Handlebars, Jinja or PHP tags mixed into HTML may fail to parse.
  • There is no HTML minify option; minifying HTML safely depends on whitespace rules for each element.
  • The first format is slower because the Prettier modules (several hundred KB) must load.

Privacy and security

Prettier runs inside this browser tab after being loaded from this site. Your HTML is never uploaded.

Read our privacy policy for details about the site as a whole.

Frequently asked questions

Will formatting change how my page looks?

With the default css whitespace mode, rendering is preserved in almost all cases. The ignore mode can add or remove spaces between inline elements.

Can it fix broken HTML?

No. Prettier needs markup it can parse; unclosed or mismatched tags are reported with their line and column so you can fix them.

What does "Keep > on the last line" do?

When an element's attributes wrap over several lines, the closing > stays at the end of the last attribute instead of moving to its own line.