How it works
Tidies and reindents HTML documents so the tag hierarchy is clear and consistent. Ideal for un-nesting minified markup, reviewing others' templates, or normalizing the style of your views.
Besides the indentation type and size and the line ending, it lets you control how attributes are wrapped (for example, one per line) and the maximum line length before wrapping, useful for tags with many attributes.
Everything runs in your browser with js-beautify and respects the content of blocks like pre and textarea. It formats the presentation; it does not validate the HTML or close missing tags.
Examples
<ul><li><a href="/a">A</a></li><li>B</li></ul><ul>
<li><a href="/a">A</a></li>
<li>B</li>
</ul>Each nested element goes on its own line with the corresponding indentation.Use cases
- Un-nest and make minified HTML markup from a page readable.
- Normalize the indentation of templates before a commit.
- Control attribute wrapping in tags with many properties.
- Review email or newsletter fragments with nested tables.
Frequently asked questions
What does the attribute wrapping option do?
It defines how a tag's attributes are laid out: on the same line, forced one per line, or aligned. It is useful when an element has many attributes and you want to improve readability.
Does it break the content of pre or textarea?
No. The formatter respects the content of tags like pre and textarea, where spaces and line breaks are significant, and does not reindent them.
Does it validate or fix the HTML?
No. It only rearranges the indentation and line breaks. It does not check that tags are properly closed or fix markup errors.
Is my code uploaded to a server?
No. Formatting happens entirely in your browser; the HTML never leaves your computer.