How the HTML beautifier works
Paste HTML into the left editor, or load it with Import File or Import URL, then click Beautify. The markup is passed to html_beautify from the open-source js-beautify library (version 1.14.11), which runs in your browser. The formatted result appears in the right editor, and the line above the editors shows the input size, output size, and how much the file grew.
The settings are fixed so the output is predictable:
- Indentation is 2 spaces per level, and the contents of
<head> and <body> are indented under <html>.
- Long lines are never wrapped. An element with ten attributes stays on one line.
- Existing blank lines are kept, but a run of blank lines is reduced to at most two.
- The contents of
<pre>, <code>, and <textarea> are left untouched, because whitespace inside them is visible on the page.
Example: formatting a minified page
HTML copied from a production site, a CMS export, or a template engine often arrives as one long line:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Order #1042</title></head><body><nav class="breadcrumbs"><a href="/">Home</a> / <a href="/orders">Orders</a></nav><main><h1>Order #1042</h1><ul class="items"><li>Keyboard <span class="qty">x1</span></li><li>USB-C cable <span class="qty">x2</span></li></ul><p class="total">Total: $84.00</p></main></body></html>
After clicking Beautify:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Order #1042</title>
</head>
<body>
<nav class="breadcrumbs"><a href="/">Home</a> / <a href="/orders">Orders</a></nav>
<main>
<h1>Order #1042</h1>
<ul class="items">
<li>Keyboard <span class="qty">x1</span></li>
<li>USB-C cable <span class="qty">x2</span></li>
</ul>
<p class="total">Total: $84.00</p>
</main>
</body>
</html>
Two details are worth noticing. Block elements such as <main>, <ul>, and <li> each get their own line, while the links inside <nav> and the <span> inside each list item stay on the same line as their text. Splitting inline elements onto separate lines would insert visible spaces into the rendered text, so the beautifier avoids it. The blank lines around <head> and <body> are added by js-beautify on purpose, to separate the two main sections.
Problems the beautifier exposes (but does not fix)
Unclosed tags
The beautifier formats what you give it. It does not repair it. This input has an unclosed <span>:
<div><p>One<p>Two<span>Three</div><footer>x</footer>
The output keeps the error as it is:
<div>
<p>One
<p>Two<span>Three
</div>
<footer>x</footer>
Leaving out </p> is allowed in HTML, but a missing </span> is a real bug: browsers will guess where it ends. When a closing tag lines up under the wrong opening tag, or indentation keeps drifting right until the end of the file, look for a missing close just above that point.
Gaps between inline-block elements
If a navigation bar or button group was written as <li>...</li><li>...</li> with no whitespace between items, and the items use display: inline-block, putting each item on its own line adds a small visible gap. This is standard browser behavior, not a beautifier bug. Switch the container to flexbox or grid, which ignores that whitespace.
Embedded CSS and JavaScript
Only the HTML part of js-beautify is loaded. Code inside <style> and <script> is moved to the right indentation level, but a minified rule like a{color:red;margin:0} stays on one line. Format those blocks separately.
Limitations
- No options for indent size, tabs, or attribute wrapping. The style described above is the only one.
- No validation. The tool never reports errors, so a successful Beautify does not mean the HTML is valid.
- Template code such as
<?php echo $x; ?> or {{ name }} is passed through as text. Simple cases come out unchanged, but check the result on files with heavy template logic.
- The input editor saves its content in your browser's local storage (on Ctrl + S and every two minutes) and restores it on your next visit. Click Clear to remove it.
When to use a different tool
Frequently asked questions
Does the HTML beautifier fix unclosed or broken tags?
No. It re-indents the markup you give it and does not add, remove, or repair tags. A missing closing tag usually shows up as indentation that keeps drifting to the right, or as a closing tag that lines up with the wrong parent. Use that as a hint to find the problem, then fix it by hand.
Can I change the indentation to 4 spaces or tabs?
Not in this tool. The output always uses 2-space indentation and long lines are never wrapped. If your project uses a different style, beautify here to get a clean structure, then let your code editor or formatter re-indent the file.
Will beautifying change how my page looks?
Usually not. Inline elements such as links, spans, and bold text stay on the same line as the surrounding text, and the contents of pre, code, and textarea are left exactly as they were. The one common exception is a row of inline-block elements that had no whitespace between them: once each element is on its own line, the browser renders a small gap between them.
Why is the CSS or JavaScript inside my page not reformatted?
This page loads only the HTML part of js-beautify. Code inside style and script tags is re-indented to match its position, but its own formatting is left alone. Paste that code into the CSS Beautifier or JavaScript Beautifier to format it properly.
Is my HTML uploaded to a server?
No. Formatting runs in your browser with js-beautify. The input is saved in your browser's local storage so it can be restored on your next visit, and Clear removes it. Import URL fetches the page directly from your browser, so it only works for URLs that allow cross-origin requests.