Language
English English Vietnamese (Tiếng Việt) Vietnamese (Tiếng Việt) Chinese (简体中文) Chinese (简体中文) Portuguese (Brazil) (Português do Brasil) Portuguese (Brazil) (Português do Brasil) Spanish (Español) Spanish (Español) Indonesian (Bahasa Indonesia) Indonesian (Bahasa Indonesia)
HTML Formatter

HTML Formatter

Format and beautify messy or minified HTML online with clean indentation, tidy attributes, and formatting for embedded CSS and JavaScript.

Beautify Messy HTML Markup

This HTML formatter turns minified or tangled markup into clean, properly indented HTML in real time, right in your browser. Paste a single-line page or a mess of nested tags and the beautified result appears instantly in the right-hand panel, with consistent indentation and tidy attribute placement.

Built on Prettier with its HTML parser, so tags, attributes, and any embedded CSS or JavaScript are all formatted to a reliable, industry-standard style.

Common Use Cases

Unminify Pages

Expand a one-line minified HTML document into readable, indented markup you can inspect and edit.

Clean Up Markup

Normalize indentation, line breaks, and attribute spacing across HTML pasted from many sources.

Review & Learn

Make page source, email templates, or generated markup easy to read before reusing it.

How to Format HTML

1

Paste Your Markup

Type or paste HTML into the Input panel on the left. You can also Upload an .html file or click Sample to load an example.

2

See Instant Output

The formatted, syntax-highlighted markup appears automatically in the right panel as you type. Line numbers and a live size counter make large documents easy to navigate. Press Ctrl + Shift + F to reformat on demand.

3

Adjust Options

Set the indent (2, 3, 4, 8 spaces or Tab), the print width, how attributes wrap, and where the closing bracket sits. The output re-formats immediately.

4

Copy or Download

Click Copy to grab the result or Download to save it as an .html file. Use Edit to tweak the output by hand before exporting.

Everything runs locally. Your markup is formatted entirely in the browser and is never uploaded to a server.

HTML Beautifier Options

Formatting Controls

These controls adapt Prettier's HTML output to your preferred markup style. Every change re-formats the result instantly.

OptionChoicesWhat It Controls
Indent2 · 3 · 4 · 8 spaces · TabIndentation width and character used per nesting level (default 4 spaces).
Print Width80 · 100 · 120Target line length before long tags and text wrap (default 80).
AttributesAuto wrap · One per lineWhether attributes stay inline or each go on their own line.
BracketNew line · Same lineWhether the closing > of a multi-line tag drops to a new line.

What Gets Formatted

Tags & Attributes

Consistent nesting, tidy attribute spacing, and correct handling of self-closing and void elements.

Embedded CSS & JS

Code inside <style> and <script> blocks is formatted inline alongside the markup.

Built-In Tools

Real-Time Formatting

Output updates as you type, with syntax highlighting and matching line-number gutters.

Upload & Download

Load a local .html file or export the formatted result with one click.

Editable Output

Switch the result panel to edit mode to make manual tweaks before copying.

New to the tool? Click Sample to load a deliberately messy page and watch it format instantly.

Frequently Asked Questions

What does an HTML formatter do?

It re-indents raw, minified, or messy HTML into clean, human-readable markup with consistent spacing and line breaks. "HTML formatter" and "HTML beautifier" describe the same job — making markup easy to read and maintain.

Does formatting change how the page renders?

No. Beautifying only adjusts whitespace and indentation for readability. The tags, attributes, and content stay the same, so the page looks and behaves exactly as it did before.

Is my HTML sent to a server?

No. All formatting happens locally in your browser. Your markup is never uploaded, logged, or stored, so it is safe to format proprietary or unreleased pages.

Does it format CSS and JavaScript inside the page?

Yes. Code inside <style> and <script> tags is formatted inline along with the surrounding HTML, so the whole document stays consistent.

Can I put each attribute on its own line?

Yes. Set the Attributes option to "One per line" to break every attribute onto a separate line, or leave it on "Auto wrap" to let Prettier decide based on the print width you choose.

Does it minify HTML too?

No. This tool is a beautifier — it expands and indents markup for readability rather than compressing it. To shrink a page for production, use a dedicated HTML minifier instead.

What happens if the markup is malformed?

If the parser cannot process the input, the tool shows an error message describing the problem instead of producing broken output. Fix the reported issue and the formatted result reappears.

Indent
Input
Output
Error

Paste code on the left to format

|
Paste minified or single-line HTML and get properly indented markup instantly.
Pick an indent width (2, 3, 4, 8 spaces or Tab) to match your project's style.
Set Attributes to "One per line" to break every attribute onto its own line.
Embedded CSS and JavaScript inside