Ttooleras
📄

Format, indent, and beautify HTML, XHTML, and HTML5 markup. Free, private — all processing in your browser.

Advertisement

Paste minified or messy HTML and get it back cleanly indented, one tag per line with nesting shown through indentation — or go the other way and minify it down to a single line with comments and whitespace removed. Useful for making a scraped page or a compressed template readable, or for shrinking markup before shipping it.

The Format button re-indents your HTML so the structure is obvious at a glance: child elements step in, closing tags line up with their openers, and self-closing tags like img and br don't create phantom indentation. The Minify button does the reverse — strips comments, collapses whitespace between tags, and returns the smallest equivalent markup. A size readout shows how many bytes you saved.

There's a language dropdown too, so the same tool handles CSS and XML with proper formatting; for HTML specifically, the tag-aware indenter is what you'll use. Pick your indent width (2, 4, or 8 spaces) and everything happens live in your browser.

Step by step

  1. 1

    Paste your HTML

    Copy HTML from an editor, view-source on a page, or a server response. Paste it into the input field.

  2. 2

    Choose indentation

    Select 2 spaces, 4 spaces, or tab. 2 spaces is the modern web default.

  3. 3

    Select HTML variant

    HTML5 (most common today), XHTML (for strict XML compatibility), or HTML 4/Legacy.

  4. 4

    Click Format

    The formatted output appears instantly. Structure and nesting are now visible through indentation.

  5. 5

    Copy or download

    Copy the cleaned HTML to your clipboard with one click, or download as a .html file.

HTML Formatter — examples

Format minified HTML

Typical server output with no whitespace.

Input
<html><head><title>Demo</title></head><body><h1>Hello</h1><p>World</p></body></html>
Output
<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>

Format nested structure

Deeply nested HTML becomes navigable with indentation.

Input
<div><section><article><h2>Title</h2><p>Content</p></article></section></div>
Output
<div>
  <section>
    <article>
      <h2>Title</h2>
      <p>Content</p>
    </article>
  </section>
</div>

Wrap long attribute lists

Tags with many attributes break onto multiple lines for readability.

Input
<a href="https://example.com/path" class="btn btn-primary" target="_blank" rel="noopener noreferrer" data-tracking-id="cta-main">Click me</a>
Output
<a
  href="https://example.com/path"
  class="btn btn-primary"
  target="_blank"
  rel="noopener noreferrer"
  data-tracking-id="cta-main"
>
  Click me
</a>

Preserve <pre> content

Code blocks keep their original whitespace.

Input
<pre><code>function hello() {
    console.log("hi");
}</code></pre>
Output
<pre><code>function hello() {
    console.log("hi");
}</code></pre>

Format inline styles

CSS inside <style> tags gets CSS-style formatting.

Input
<style>body{margin:0;padding:0}h1{color:red}</style>
Output
<style>
  body {
    margin: 0;
    padding: 0;
  }
  h1 {
    color: red;
  }
</style>

Fix unclosed tags

Malformed HTML is cleaned up.

Input
<ul><li>One<li>Two<li>Three</ul>
Output
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

What the HTML Formatter can do

Pretty-print any HTML

Messy single-line HTML becomes indented, multi-line markup that reveals the document structure at a glance.

Multiple indentation options

Choose 2 spaces, 4 spaces, or tab indentation. Match your project or team's style guide.

HTML5, XHTML, and legacy HTML

Formatter handles all HTML variants. Self-closing tags follow the variant you select.

Format inline CSS and JavaScript

Style blocks and script blocks inside HTML are formatted according to CSS and JavaScript conventions, not HTML indentation.

Preserve whitespace in pre, code, textarea

Whitespace-sensitive elements keep their original content — essential for code samples and text areas.

Attribute wrapping

Long attribute lists are broken onto multiple lines for readability. Configurable threshold (default 80 chars).

Handle malformed HTML gracefully

Like a browser, the formatter recovers from most errors — unclosed tags, mismatched nesting, unquoted attributes. You get clean output even from broken input.

100% client-side processing

Your HTML never leaves your browser. Safe to format email templates, internal tools, and client project code.

Where this helps

Web development

  • →Clean up WYSIWYG editor output: CMS editors (TinyMCE, CKEditor, Quill) produce messy HTML. Format to make it readable before committing.
  • →Format server-rendered HTML: PHP, Java, Python, Node templates often output HTML without indentation. Format to review rendered pages in staging.
  • →Debug scraped or embedded HTML: HTML from third-party sources (APIs, partner sites) often arrives minified or malformed. Format to inspect structure.
  • →Prepare code examples: Before including HTML in blog posts, documentation, or tutorials, format it consistently so readers see clean code.

Email development

  • →Format email templates: HTML emails use nested tables and inline styles — formatting makes the structure navigable.
  • →Audit email HTML for errors: Clean formatting reveals missing closing tags and nesting mistakes that cause rendering issues in Outlook and Gmail.
  • →Clean up Mailchimp / SendGrid exports: Exported email HTML is often minified. Format to understand structure before customizing.

Debugging and QA

  • →Inspect rendered DOM: Copy `outerHTML` from browser DevTools, format, and review to understand what the browser actually rendered.
  • →Compare expected vs actual output: Format both expected and actual HTML, then use a diff tool to find differences.
  • →Validate against design spec: Formatted HTML makes it easier to verify that your markup matches the intended structure.

SEO and accessibility

  • →Audit semantic structure: Formatted HTML reveals whether you are using proper heading hierarchy (h1-h6), landmark elements (nav, main, aside), and sectioning correctly.
  • →Check ARIA attributes: Verify ARIA roles, states, and properties are applied correctly on interactive elements.
  • →Review Open Graph and meta tags: Properly-formatted `<head>` makes it easy to check og:image, og:description, twitter:card, etc.

Technical details

The HTML formatter works by tokenizing on tag boundaries: it inserts line breaks between adjacent tags and around tag/text transitions, then walks the tokens tracking an indent counter. Opening tags increase the indent for their children; closing tags decrease it first so they align with their opener. A list of void elements (br, hr, img, input, meta, link, area, base, col, embed, source, track, wbr) is excluded from indenting, since they have no closing tag. Minifying strips HTML comments, collapses whitespace runs to single spaces, and removes the space between tags.

This is a regex- and token-based beautifier, not a real HTML parser. It doesn't build a DOM, so it won't fix or flag broken markup, and it assumes your tags are reasonably well-formed. Content inside <pre>, <textarea>, or <script> where whitespace is significant can be reflowed, which changes rendering — so don't run it blindly on pages with those. For those cases, an editor's Prettier integration, which does parse the document, is safer. Everything runs locally; nothing is sent to a server.

Pitfalls and fixes

⚠It's not a full HTML parser

The formatter works on tag tokens, not a real DOM. It won't fix broken or unbalanced tags, and badly malformed markup can indent incorrectly. It assumes reasonably well-formed input.

⚠Whitespace-sensitive content can be altered

Reformatting can change whitespace inside <pre>, <textarea>, and <script>/<style>, where spacing matters. That may change how the page renders or behaves. Avoid running it on markup containing those, or check the result carefully.

⚠Minify is conservative, not a full optimizer

Minify removes comments and collapses whitespace, but it doesn't remove optional tags, shorten attributes, or do the advanced tricks a dedicated HTML minifier does. Expect modest savings, not maximum compression.

⚠Attributes stay on one line

Long tags with many attributes aren't wrapped — the whole opening tag stays on a single line. The tool indents structure, not attribute lists.

⚠Use the right language mode

The dropdown includes JavaScript, TypeScript, Python, YAML, and TOML, but for those it only does basic whitespace cleanup, not real formatting. HTML, CSS, and XML get proper structure-aware formatting.

HTML Formatter — comparisons and alternatives

A parser-based formatter like Prettier or js-beautify builds a full document model, so it handles edge cases this tool doesn't — significant whitespace in pre/textarea, script and style contents, and malformed markup recovery. If you have those in your editor, they're the more robust choice for production files.

Where this shines is the quick, in-browser cleanup: paste a blob of minified HTML you got from view-source or an API, hit Format, and read it — no install, no config. And the Minify direction with its byte-savings readout is handy for a fast size check. Think of it as a readability tool for HTML you're inspecting, with a solid indenter for well-formed markup.

HTML Formatter — FAQ

▶What does the Format button do?

It re-indents your HTML with one tag per line, stepping child elements in and aligning closing tags with their openers. Void elements like img and br are handled so they don't add false indentation. You choose 2, 4, or 8 spaces.

▶Is it safe to run on any HTML?

For well-formed markup, yes. Be careful with pages containing <pre>, <textarea>, or <script>, where whitespace is significant — reformatting can change how they render. It also won't repair broken tags, since it isn't a full parser.

▶How much will minifying save?

It removes comments and collapses whitespace, which typically trims a modest percentage — the tool shows the exact byte savings. For maximum compression (removing optional tags, attribute shortening), use a dedicated HTML minifier.

▶Does it validate my HTML?

No. It formats or minifies but doesn't check validity or report errors. For validation, use the W3C validator or an editor with an HTML language server.

▶Can it format CSS or XML too?

Yes. The language dropdown does proper structure-aware formatting for HTML, CSS, and XML. JavaScript, TypeScript, Python, YAML, and TOML only get basic whitespace cleanup here.

Additional resources

Advertisement

Related tools

All Formatters & Beautifiers
🎨

CSS Formatter

Beautify and indent CSS, SCSS, LESS code — configurable style, production-ready output

📦

CSS Minifier

Compress CSS to minimum size — remove whitespace, comments, shorten values

🏷️

HTML Entity Encoder/Decoder

Encode special characters to HTML entities (&amp;, &lt;, &quot;, &copy;) or decode entities back to their literal characters.

📦

HTML Minifier

Compress HTML by removing whitespace, comments, optional tags — 20-40% smaller

📊

HTML Table to CSV

Convert HTML tables to CSV format for data analysis. Handles rowspan, colspan, and extracts clean tabular data.

📝

HTML to Markdown

Convert HTML to clean, readable Markdown preserving structure and formatting

Learn more

Next.js App Router: A Complete Beginner Tutorial

26 min read

How to Decode a JWT: A Practical Debugging Guide (with the Base64URL Gotcha Nobody Warns You About)

17 min read

UUID v4 vs v7: The Default Has Quietly Changed

22 min read

Explore more tools

200+ free tools that run in your browser.

Browse all tools →