Free Online HTML Formatter

What this page is for

A page exported from a visual builder, copied out of a browser inspector or generated by a template engine often arrives as one long line. HTML Beautify parses that source, rebuilds the element tree and writes it back with one element per line and four spaces per nesting level. The result is easier to review, diff and hand-edit.

The page defaults to HTML and Beautify, accepts up to 200,000 characters, and processes the document on the server. It is a formatting pass, not a validator and not a browser.

How the formatter parses your markup

The server loads the source into a DOM parser, walks the resulting tree and prints each node with indentation. That approach is reliable for well-formed markup, but it means the output is a reconstruction rather than the exact bytes you pasted.

Tag names may be lowercased, unclosed elements may be closed, attribute values may be re-quoted and entities may be normalised. Malformed nesting can be repaired in a way that changes the tree. These are normal consequences of parsing HTML, not random corruption.

Comments and doctypes

The formatter walks element and text nodes. Comment nodes are skipped, so an HTML comment in the input is generally absent from the output. A document type declaration can also disappear because it is not an element node.

If you need to preserve comments or a doctype, keep the original file and use the beautified copy for reading only. For a production template, a formatter that preserves every node is a better choice than one built on a DOM rebuild.

Whitespace inside inline elements

The formatter trims text nodes before printing them. That is harmless between block elements, but it can change the rendered result inside inline elements. A trailing space inside a span, a line break between two links, or a space before a strong tag may vanish, joining words that were separate on the page.

After formatting, open the result in a browser and look at paragraphs that mix links, emphasis and inline code. If spacing matters, restore the affected text or keep the original inline markup on one line.

Style and script blocks

Style and script contents are re-indented as text. The page does not run the CSS or JavaScript beautifiers on them, so a minified script inside the document stays minified, just with new leading whitespace on its lines. Use the dedicated CSS or JavaScript beautifier if you want those blocks expanded properly.

Be careful with script content that contains HTML-like strings. A DOM-based formatter can treat angle brackets inside a string as markup in some edge cases. Check the console after formatting.

Fetching a URL

The URL tab downloads a public page on the server and puts the response in the editor. It fetches the raw HTML, not the rendered DOM, and the fetch is capped at 200,000 characters. Pages behind a login, bot checks or heavy client-side rendering may return an error or an empty shell.

After a successful fetch the page switches to the manual editor, where you can inspect the source before formatting. Nothing is submitted back to the site you fetched.

Step by step

1. Paste the document into Manual Code, or load it through the URL tab.
2. Keep the language on HTML and the mode on Beautify.
3. Press Process Code. The output editor receives the indented document.
4. Read the structure first: mismatched closing tags become obvious once each level is indented.
5. Copy the output, or download it as beautify-output.html.
6. Open the downloaded file in a browser and compare it with the original.

When beautifying helps

It helps when you inherit a single-line export and need to find where a div closes. It helps when you are reviewing a pull request and want a readable diff. It also helps when you are learning HTML and want to see the nesting of a real page.

It is less useful as a build step. A formatter that rebuilds the tree can change whitespace, drop comments and normalise attributes, which is too much risk for a file that already works.

Large documents

The 200,000-character cap is generous for a normal page but small for a generated application shell. If the input is larger, split it at clear section boundaries or format the source in your editor. Sending a truncated document produces a valid-looking but incomplete output, which is worse than an error.

Checking the output

Compare the text content of the original and the formatted page. Then test forms, inline event handlers and anything that depends on exact whitespace. If the page uses a content security policy, remember that reformatting does not change it, but moving inline code around can affect how you audit it.

Attribute order and quoting

Attributes are reprinted in the order the parser reports, usually the source order. The formatter always wraps values in double quotes and escapes embedded quotes, so a value written with single quotes comes back with double quotes. That is valid HTML, but it will show up in a diff. If you are formatting a file only to read it, keep the original for commits.

Indentation style

This page uses four spaces per level and does not expose a tab-width setting. Four spaces is the common default in HTML style guides and keeps deep nesting readable without pushing lines too far right. If your project uses two spaces or tabs, treat the output as a reading copy and let your project formatter produce the committed version.

Components and framework markup

Vue, Angular and React templates are not plain HTML. Directives such as v-if, event bindings and JSX expressions use syntax that an HTML parser may reinterpret, lowercase or reorder. Beautifying a component file can break it. Format the compiled HTML output instead, or use the formatter that ships with the framework.

Diff before you commit

Run a text diff between the original and the formatted file. Whitespace-only changes are expected; attribute quoting, dropped comments and moved closing tags are not. Review those before replacing a working file, and keep the diff small enough that a reviewer can see what actually changed.

Limits

One document per run, 200,000 characters, HTML mode only on this page. The code is processed on the server and returned; it is not stored. The tool does not validate accessibility, check links, or guarantee that the rebuilt markup is byte-identical to the input.

Frequently Asked Questions