HTML Formatter

Free online HTML formatter and HTML beautifier to turn messy, minified or poorly indented markup into clean, readable HTML. Choose indentation, preserve blank lines, and let the formatter handle void elements and protected content correctly. Works on HTML5, JSX and XML. No signup, runs entirely in your browser.

Paste your HTML

Paste minified or messy markup
Indent:
Tip: Press Ctrl + Enter (or Cmd + Enter) inside the input to beautify instantly. Content inside <pre>, <textarea>, <script> and <style> is preserved exactly as written.

Formatted output

Ready when you are
Ready — paste HTML and click Beautify.

Your formatted HTML will appear here. Paste some markup and click Beautify HTML.

What does this HTML Formatter do?

This free online HTML formatter — also called an HTML beautifier or HTML prettifier — takes minified, poorly indented or messy markup and rewrites it with consistent indentation, line breaks and spacing so it is readable and editable. Paste the output of a build tool, a legacy template, or code from a browser's view-source, and you get clean HTML you can actually work with.

Unlike a simple find-and-replace, this tool understands HTML structure. It uses a tokenizer that tracks tags, attributes, comments, doctypes and protected content blocks (like pre and textarea), so it does not accidentally break content inside those elements. Elements, attributes, text content and structure stay exactly the same — only the whitespace and line breaks are reorganised.

Everything runs locally in your browser. The HTML you paste never leaves your device, there is no signup, and there are no usage limits. Format as much HTML as you want, as many times as you want.

How to format and beautify HTML code

  1. Paste your HTML into the input box on the left. You can paste minified markup, template output, or hand-written HTML.
  2. Choose your options. Pick the indentation size (2 spaces, 4 spaces or tab), and choose whether to preserve blank lines or strip trailing spaces.
  3. Click Beautify HTML. The formatter rewrites your HTML with consistent indentation and line breaks. The formatted output appears instantly in the panel on the right.
  4. Review the formatted output. The formatted code is syntax-highlighted — tags, attributes, values and comments each get their own colour for easy reading.
  5. Copy or download. Use Copy Output to put the formatted HTML on your clipboard, or Download .html to save it as a file.

Why use this HTML Formatter?

Instant formatting

The formatter runs entirely in your browser, so the output appears the moment you click. No server round-trip, no waiting.

Configurable style

Choose 2-space, 4-space or tab indentation. Preserve or strip blank lines. Remove trailing spaces for clean output.

Void element handling

Void elements like <br>, <img> and <input> are handled correctly — no broken self-closing tags, no phantom closing tags.

Byte-size stats

See input bytes, output bytes, lines added and original line count. Useful for understanding how much whitespace a minifier strips.

100% private

Everything runs in your browser. The HTML you paste never leaves your device — no server, no logs, no tracking.

Works offline

Once the page loads, you can format HTML without an internet connection. Bookmark it for offline work.

What gets reformatted during HTML beautification?

WhatBeforeAfter
Indentation<div><p>Hello</p></div><div> then indented <p>Hello</p> then </div>
Line breaks after tags<h1>Title</h1><p>Text</p>Each element on its own line
Blank linesMultiple consecutive blank linesCollapsed to a single blank line (or removed)
Trailing whitespaceSpaces at the end of each lineRemoved (when option is enabled)

What is not changed: content inside <pre>, <textarea>, <script> and <style> tags; string contents in attributes; text content of elements; or the actual tokens of your markup. The formatter is conservative — it only moves whitespace and line breaks between tags, never alters the code inside them.

HTML formatting best practices

  • Use a consistent indentation style. 2 spaces is the most common choice in modern web development; 4 spaces is also common. Whatever you pick, keep it consistent across the project.
  • Keep one element per line when nesting. Putting each nested element on its own line makes the structure easy to scan and diff.
  • Use a linter alongside a formatter. HTMLHint catches actual structural issues; a formatter handles style. Tools like Prettier combine both.
  • Run a formatter on save. Set up your editor to format on save so you never have to think about it.
  • Never edit minified HTML directly. Always keep the original source and regenerate the minified version from it.
  • Use proper void element syntax. Write <br> not <br/> in HTML5.

Need to go the other direction and shrink HTML for production? Use our HTML Minifier to compress it.

Frequently asked questions

An HTML formatter (also called an HTML beautifier or prettifier) takes minified, poorly indented or messy HTML and rewrites it with consistent indentation, line breaks and spacing so it is readable and editable. This tool also preserves content inside pre, textarea, script and style tags exactly as it was written.
Yes, completely free. No signup, no watermark, no hidden charges. Format as much HTML as you want, as many times as you want, for personal or commercial projects.
No. Formatting only changes whitespace between tags and indentation. The elements, attributes, text content and structure of your HTML stay exactly the same, so the page renders identically in the browser.
Yes. Void elements (area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr) are treated correctly. They do not get closing tags, and any self-closing slash is normalised to the HTML5 style.
Content inside pre, textarea, script and style tags is preserved exactly as written. The formatter does not touch whitespace or indentation inside these elements because it would change how the page renders.
Yes, for basic formatting. The formatter uses an HTML-aware tokenizer that handles nested tags, attributes and comments. It also works on JSX-style self-closing tags and XML-style markup.
You can choose 2 spaces, 4 spaces, or a single tab character for indentation. You can also choose whether to preserve blank lines between elements or collapse them.
Yes. HTML comments are preserved and placed on their own lines with proper indentation, so you can still read annotations in the formatted output.
Absolutely. Everything runs in your browser. The HTML you paste never leaves your device — no server processing, no logging and no data storage. Close the tab and it is gone.
Yes. Use the Download .html button to save the formatted HTML as a .html file. The file is created entirely in your browser using a Blob URL — no server round-trip.
Yes. Once the page loads, the HTML formatter works without an internet connection. All formatting happens locally in your browser using JavaScript.
Beautify (format) expands HTML with indentation and line breaks to make it readable for humans. Minify compresses HTML by removing whitespace, comments and unnecessary characters to make the file as small as possible. This tool does beautify. For minify, use a dedicated HTML minifier.