Developer

HTML Beautifier

Indent minified HTML with 2 spaces, 4 spaces, or a tab. Copy or download the formatted markup. Ordinary tags are reindented in your browser.

HTML Beautifier

Reindent HTML with 2 spaces, 4 spaces, or a tab.

ShareX LinkedIn Facebook

HTML

Indent:2 spaces4 spacesTab

Formatted HTML

—

Output actions

Ready to copy output once your result appears.

Indent size and markup limits

HTML Beautifier reindents markup you paste. Before the indent pass, every run of whitespace in the whole document becomes a single space. You can indent with two spaces, four spaces, or a tab. Ordinary elements nest. The pass is not an HTML parser, it does not repair missing closers reliably, and pre, script, style, and textarea can lose their closing tags.

How to indent HTML

1Paste markup into the HTML box. The box starts empty. Minified markup and markup that already has line breaks are both collapsed before indenting.
2Choose 2 spaces, 4 spaces, or Tab. 2 spaces is selected when the page opens.
3Click Beautify. Copy output copies the indented text. Download output saves html-beautifier.txt, not an .html file. An empty box clears the result and does not show an error.

What it is good for

• Reading a minified fragment of ordinary elements, such as a list or a simple card.
• Picking two spaces, four spaces, or a tab as the only formatting option.
• Seeing the limits before you paste a document that depends on script, style, or pre.

Example

Input

<ul><li>One</li><li>Two <b>bold</b></li></ul>

Output

<ul>
  <li>One
  </li>
  <li>Two
    <b>bold</b>
  </li>
</ul>

Two-space indent. The word One stays on the opening li line, and the closing li drops to the next line. The b element stays on one line because b is treated as inline.

What the indent pass does

Beautify first rewrites the input with two replacements: whitespace between a > and a < is removed, then every remaining whitespace run becomes one space, then the string is trimmed. Only after that does the indenter walk the characters. A tag increases the indent when it is a normal element. A closing tag decreases the indent first, unless the name is on the inline list, in which case the closer may be glued to the previous line when that line does not already end with >.

Void tags do not change the depth: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, and wbr. A tag that already ends in /> is treated the same way. Inline names, including a, b, strong, span, em, code, and img, are written at the current indent and do not push the following siblings deeper. Comments are detected when a tag starts with .

The three indent choices

The radios are labeled 2 spaces, 4 spaces, and Tab. 2 spaces inserts two U+0020 characters per level. 4 spaces inserts four. Tab inserts one tab character per level. There is no field for a custom width, no minify mode, and no wrap-column setting. The choice applies the next time you click Beautify. It does not live-update the result.

Copy output and Download output both use that result. The download name is html-beautifier.txt. Rename the file if you need an .html extension. The formatted preview is labeled Formatted HTML. Empty input sets that preview to empty and returns before any success or error event.

Jobs for reindented markup

A minified list, a small component, or a pasted snippet from a CMS is easier to diff after the tags sit on their own lines. The sample ul with two li children is the shape this pass handles cleanly. Use it for that kind of fragment, then copy the text into your editor.

Stylesheets are a different control: the CSS beautifier. Turning characters such as < into entities is the HTML encoder, which is not what Beautify does. Markdown source should go through Markdown to HTML before you think about indent. If the goal is the visible words rather than the tags, use HTML to text.

Whitespace, void tags, and script

Because the collapse runs on the entire string, two spaces inside a sentence become one, and newlines inside pre, script, style, and textarea are already gone before the special-case mode starts. Hello followed by three spaces and world is emitted as Hello world. You cannot ask this page to preserve significant whitespace.

pre, script, style, and textarea switch the walker into a buffer. The closing tag is recognized only when the buffer begins with the opening tag name. In practice the closer is often the first thing in that buffer, so it does not match, the closer is dropped, and later markup can be swallowed or printed at the wrong indent. A script element followed by a paragraph can lose the script closer and the paragraph tags while the paragraph text remains. Do not beautify a document whose behavior depends on those four elements. Split them out first.

The walker does not build a DOM, so it will not insert a missing html or body, will not fix overlapping tags, and will not understand SVG foreign content beyond the tag-name lists. An unclosed < with no > is printed as the remainder of the string. Comments that never reach --> are printed as the remainder too.

Rules and limitations

Indent is 2 spaces (the default), 4 spaces, or one tab per level. The whole input is whitespace-collapsed before indenting. Void and self-closing tags do not increase depth. Inline tags do not increase depth.

pre, script, style, and textarea are not safe inputs: their closers can be dropped. The tool does not validate, does not minify, and does not fetch a URL. Download output writes html-beautifier.txt. An empty box clears the result.

Common problems

If a script or style block lost its closing tag, or the markup after it disappeared, that is the buffer behavior described above. Remove those elements and beautify the rest, or format them in an editor that understands HTML.

If words that were separated by several spaces are now separated by one, the collapse did that before indenting. Put the extra spaces back afterward if they were meaningful. Closing li and p tags often land on the following line; that is the current layout, not a broken paste.

Frequently asked questions

Which indent sizes can I pick?

2 spaces, 4 spaces, or Tab. 2 spaces is the initial choice. There is no custom number and no minify switch. Click Beautify after you change the radio.

Are script and style blocks preserved?

No. Whitespace inside them is collapsed first, and the closing tag is often dropped. Markup that follows a script, style, pre, or textarea can be lost or mis-indented. Take those elements out before you beautify.

Does Beautify validate the HTML?

No. It does not parse with the browser's HTML parser, does not report unclosed elements, and does not add missing structural tags. An empty input clears the output without an error message.

Why did repeated spaces disappear?

Every whitespace run in the document becomes a single space before tags are indented. Newlines you typed inside the text are removed the same way. The indent you see is only the indent the pass inserts between tags.

Is my input uploaded or saved?

This tool processes input in your browser and does not save its input or output to local storage. Copy and download are user actions. The site uses analytics for page and action metadata and may use ads and production error reporting; see the Privacy Policy for those services.

About this tool

Maintained by Toolbench. For large or deeply nested files, split the input into smaller batches and verify representative results before using them in an import or application. Report reproducible problems through Contact.

Next steps