HTML Beautifier

Developer Tools HTML, CSS and Frontend

Paste HTML and the beautifier puts each tag on its own line, indented by how deeply it is nested. For example, a one-line unordered list holding two list items becomes four lines, with both items indented two spaces inside the list. Void elements like br and img never add a level.

About this tool

Minified templates, HTML copied from a browser's view-source or markup produced by a CMS often arrive as one long line, which makes a missing closing tag nearly impossible to spot. This beautifier reflows the markup so each element starts on its own line, indented by depth, and reports how many elements there are and how deep the nesting goes. Elements that hold only a short run of text, such as a heading or list item, stay on one line so the output does not balloon. Contents of pre, textarea, script and style are left untouched, since whitespace there can change what the page shows. It is a formatter, not a validator: it warns about unclosed or stray tags but does not check attributes against the HTML specification.

How to use it

Paste or open your markup
Paste HTML into the box or open an .html or .txt file from your device; it is read locally.
Choose the indent
Pick 2 spaces, 4 spaces or a tab to match your project's editor settings.
Check the warnings
Unclosed elements and closing tags without an opening tag are listed under the result.
Copy the formatted HTML
Use Copy result to take the reformatted markup back into your editor.

Examples

A one-line list

HTML markup: <ul><li>A</li><li>B</li></ul>
Indent with: 2 spaces

Result Formatted HTML: <ul>
<li>A</li>
<li>B</li>
</ul>
Elements: 3
Lines: 4
Deepest nesting: 1
Comments: 0
Input characters: 29
Output characters: 36

Split the markup into 8 tokens: tags, comments and text runs.
Placed each block on its own line, indented 2 spaces per nesting level; void elements such as br and img do not open a level.
An element holding only short text stays on one line; pre, textarea, script and style contents are kept as written.

Each list item moves to its own line, two spaces in, and stays on one line because it holds only short text.

A paragraph with a line break

HTML markup: <p>Hi<br>there</p>
Indent with: 2 spaces

Result Formatted HTML: <p>
Hi
<br>
there
</p>
Elements: 2
Lines: 5
Deepest nesting: 1
Comments: 0
Input characters: 18
Output characters: 28

Split the markup into 5 tokens: tags, comments and text runs.
Placed each block on its own line, indented 2 spaces per nesting level; void elements such as br and img do not open a level.
An element holding only short text stays on one line; pre, textarea, script and style contents are kept as written.

The br tag is a void element, so the text after it stays at the same depth instead of being indented further.

Tab indentation

HTML markup: <div><span>a</span></div>
Indent with: Tab

Result Formatted HTML: <div>
<span>a</span>
</div>
Elements: 2
Lines: 3
Deepest nesting: 1
Comments: 0
Input characters: 25
Output characters: 28

Split the markup into 5 tokens: tags, comments and text runs.
Placed each block on its own line, indented one tab per nesting level; void elements such as br and img do not open a level.
An element holding only short text stays on one line; pre, textarea, script and style contents are kept as written.

With Tab selected, each nesting level is one tab character, which many code editors display at their own width.

How it is calculated

line indent = nesting depth × indent unit; depth rises after an opening tag and falls at its closing tag

nesting depth: number of non-void elements still open at that point in the markup
indent unit: 2 spaces, 4 spaces or one tab, as selected

The markup is split into tokens: opening tags, closing tags, comments, doctype declarations and text. Quoted attribute values are respected, so a greater-than sign inside an attribute does not end the tag. Runs of whitespace in text collapse to one space, as browsers render them. The thirteen void elements listed by the WHATWG standard, such as br, img, input and meta, never open a level. A closing tag closes back to its matching opener, so implicitly closed elements do not leave the indentation drifting.

When not to use it

Inside templates with server-side syntax like PHP or Jinja blocks mixed into tags, the output can be misaligned.
When inline whitespace between spans or links matters to the layout, since added line breaks can introduce visible gaps.
For checking markup validity, which needs a conformance checker such as the W3C validator.

Common mistakes

Expecting text inside pre or textarea to be re-indented; it is deliberately kept exactly as written.
Reading an unclosed-element warning as an error when the tag, like a final p or li, is legally optional.
Pasting only a fragment of a closing structure and then worrying about the stray closing-tag count.

Frequently asked questions

Why does a br or img tag not indent what follows it?

They are void elements in the HTML standard: they have no content and no closing tag, so nothing nests inside them. The tool uses the WHATWG list of thirteen void elements, including br, hr, img, input, link and meta.

Will formatting change how my page looks?

Usually not, because browsers collapse whitespace between block elements. The exception is inline content: adding a line break between two spans or links can create a visible space, so check inline-heavy sections after formatting.

Are scripts and styles reformatted too?

No. The contents of script, style, pre and textarea are passed through as written. Reformatting JavaScript or CSS needs a language-specific formatter, and pre and textarea preserve whitespace on screen.

What does the unclosed element warning mean?

It lists elements that were opened but never closed by the end of the input. Some, such as p, li and td, may legally omit their end tag, so the warning is a prompt to look, not proof of a bug.

Is my HTML uploaded anywhere?

No. Tokenising and indenting run in your browser, and an opened file is read on your device. Nothing is sent to a server.

Why do some elements stay on one line?

An element containing only a short text run, up to 80 characters, such as a title, heading or list item, is kept on one line. Splitting it into three lines would add length without making the structure clearer.

Cite this tool

Using this tool in an assignment, article or report? Copy a citation, or a link for your website.

APA

Tools Directory Editorial Team. (2026, October 18). HTML Beautifier. Tools Directory. Retrieved October 26, 2026, from https://tools.milunir.com/developer-tools/html-css-and-frontend/html-beautifier/

MLA

Tools Directory Editorial Team. “HTML Beautifier.” Tools Directory, 18 Oct. 2026, https://tools.milunir.com/developer-tools/html-css-and-frontend/html-beautifier/. Accessed 26 Oct. 2026.

Chicago

Tools Directory Editorial Team. “HTML Beautifier.” Tools Directory. Last modified October 18, 2026. Accessed October 26, 2026. https://tools.milunir.com/developer-tools/html-css-and-frontend/html-beautifier/.

Link

<a href="https://tools.milunir.com/developer-tools/html-css-and-frontend/html-beautifier/">HTML Beautifier – Tools Directory</a>