An HTML formatter for real-world markup
This HTML formatter takes markup that is squeezed onto one line, generated by a CMS, or pasted from a page's source and indents it so the element tree is visible. It is powered by js-beautify's HTML beautifier, which also formats the CSS inside <style> and the JavaScript inside <script> elements, so a whole page comes out readable in one pass.
js-beautify is tolerant of imperfect markup. Unclosed paragraphs, missing </li> tags and template placeholders do not stop it; it formats what it finds. That makes it a good fit for HTML you do not control, such as email templates or legacy pages.
Example
<!DOCTYPE html><html><head><title>Demo</title><style>body{font-family:sans-serif;margin:0}</style></head><body><div class="card"><h1>Hello</h1><p>Some <b>bold</b> text and a <a href="#">link</a>.</p><ul><li>One</li><li>Two</li></ul></div></body></html><!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
body {
font-family: sans-serif;
margin: 0
}
</style>
</head>
<body>
<div class="card">
<h1>Hello</h1>
<p>Some <b>bold</b> text and a <a href="#">link</a>.</p>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</body>
</html>Block elements such as <div>, <ul> and <li> start new lines, while inline elements like <b> and <a> stay inside the paragraph, because breaking them would add visible spaces to the text. By default <head> and <body> are not indented relative to <html>, which saves one level of indentation for the whole document.
Options explained
Indent
2 spaces (default), 3, 4, 8 or tabs. The indent also applies to formatted CSS and JavaScript inside the page.
Wrap attributes
| Mode | Behavior |
|---|---|
| Auto | Attributes stay on the tag's line. Lines are not wrapped by length. |
| Force | If a tag has more than one attribute, every attribute after the first goes on its own line, indented one level. |
| Force aligned | Like Force, but continuation lines are aligned under the first attribute. |
| Preserve | Keeps attribute line breaks exactly as in your input. |
With Force aligned, a long form field becomes:
<input type="email"
id="email"
name="email"
required
placeholder="you@example.com">Force modes are popular for component-heavy markup (Bootstrap, Tailwind) where elements carry many classes and aria-* attributes, because each attribute change then shows up as a single-line diff.
Indent head and body
When checked, <head> and <body> are indented inside <html>, and everything below them moves one level deeper. Leave it off for full documents to keep lines shorter.
What is preserved
- Content of
<pre>and<textarea>is left exactly as written, since whitespace is significant there. - Comments, conditional comments and the doctype are kept.
- Attribute values and their quotes are not changed.
- Inline elements are not split in a way that would change rendered spacing.
Beautify or Minify?
Use Beautify while you read, debug or edit markup. Use Minify when you need compact HTML for a template, an email or an embed: it removes comments and collapsible whitespace and shortens boolean attributes. For fine control over what minification does, such as keeping attribute quotes or skipping inline JavaScript, use the dedicated HTML Minifier.
Formatter vs. validator
Because the beautifier is forgiving, it will not tell you that a <div> is never closed; the indentation will simply look wrong from that point on. When the output drifts to the right unexpectedly, run the markup through the HTML Validator, which reports unclosed and mis-nested tags with line numbers. If you want stricter, opinionated output that also closes optional tags and wraps long lines, try HTML Pretty Print, which uses Prettier.
Formatting is done locally in your browser. Load URL fetches a page's HTML so you can inspect it, but the formatting itself never leaves your device.