HTML Formatter

Beautify and format HTML markup with syntax highlighting and a live sandboxed preview.

BeautifyFormatPreview
Indent
Input
574 chars
644 chars

All formatting happens locally — your code never leaves your browser.

HTML Formatter takes minified or hand-mangled markup and re-indents it so each block-level element sits on its own line, nested one level deeper than its parent. Paste a template, an email snippet or the HTML a CMS spat out, click Format, and you get structure you can actually scan.

The formatter is deliberately lightweight: a small tokenizer reads tags, comments and text (quoted attribute values may contain >) and tracks nesting depth, rather than building a full DOM. Void elements such as <meta>, <img>, <br> and <link> do not increase the depth, inline tags (<a>, <span>, <strong>, <em>, <code> and similar) stay in the same line as their text, and a short element with only inline content is kept on one line, like <p>Some <strong>bold</strong> text.</p>.

Whitespace-sensitive content is left alone: <pre> and <textarea> are copied exactly as written, and the code inside <script> and <style> is kept intact and re-indented as a block, so a < in a script never splits it. Runs of whitespace in normal text are collapsed to single spaces, which is how browsers render them anyway.

Formatting runs entirely in your browser. If you need to show markup as text on a page rather than tidy it, use the HTML escape tool; for stylesheets pulled out of a <style> block, the CSS formatter handles beautify and minify.

  1. Paste your HTML into the Input editor (it starts with a sample document you can overwrite or clear).
  2. Choose 2 or 4 spaces with the Indent buttons.
  3. Click Format to generate the re-indented markup in the Formatted Code tab.
  4. Switch to the Live Preview tab to see the formatted output rendered in a sandboxed iframe.
  5. Use the copy button above the output to copy the result into your editor.

  • Re-indents nested block elements with 2- or 4-space indentation
  • Keeps void elements (<img>, <meta>, <br>, <input>, <link>) from adding a nesting level
  • Leaves common inline tags such as <a>, <strong> and <span> alongside their text
  • Live Preview tab renders the formatted output in an iframe sandboxed with allow-scripts only
  • CodeMirror editors with HTML syntax highlighting, line numbers and code folding
  • Character counts for input and output, plus one-click copy
  • Runs locally in the browser; the markup is not uploaded

Nested block elements

Input:
<section><h2>Pricing</h2><div class="plans"><div class="plan">Free</div><div class="plan">Pro</div></div></section>

Output:
<section>
  <h2>Pricing</h2>
  <div class="plans">
    <div class="plan">Free</div>
    <div class="plan">Pro</div>
  </div>
</section>

Each block element moves onto its own indented line; elements holding only short text stay on one line.

Void elements in <head>

Input:
<head><meta charset="utf-8"><title>Docs</title><link rel="stylesheet" href="app.css"></head>

Output:
<head>
  <meta charset="utf-8">
  <title>Docs</title>
  <link rel="stylesheet" href="app.css">
</head>

<meta> and <link> have no closing tag, so the following siblings stay at the same depth.

Inline tags stay with their text

Input:
<div><p>Some <strong>bold</strong> text.</p></div>

Output:
<div>
  <p>Some <strong>bold</strong> text.</p>
</div>

Inline elements stay inside the sentence they belong to, so the spacing around them is unchanged.

Indentation keeps drifting to the right

An element was opened but never closed, or a non-void tag such as <p> or <li> relies on implicit closing.

Add the missing closing tags. The first line where indentation stops returning to the expected level is usually just after the unclosed element.

A stray closing tag stays where it is

A closing tag such as </div> has no matching opening tag, so the formatter leaves it at the current depth instead of guessing.

Remove the extra closing tag, or add the opening tag it belongs to.

Live Preview is blank or unstyled

Format has not been run yet, or the markup references stylesheets, images or scripts by relative path, which resolve against this site rather than your project.

Click Format first, and use absolute URLs for external assets you want the preview to load.

Does formatting change how my page renders?

Rarely. Tags and attributes are kept as written, <pre> and <textarea> are copied verbatim, and inline elements stay inside their text. Line breaks are added only between block-level elements, where HTML ignores whitespace. Elements styled with white-space: pre in your own CSS are the main exception, so compare the Live Preview with the original if exact output matters.

How does the Live Preview work, and can scripts run in it?

The preview loads the formatted output into an iframe with sandbox="allow-scripts". Scripts in your markup do run, but the frame has no same-origin access, so it cannot read this site's cookies or storage, and forms, pop-ups and top-level navigation are blocked. The preview shows the formatted code, so click Format before opening it.

Does it handle full documents with a doctype and comments?

Yes. <!DOCTYPE html> and <!-- comments --> each go on their own line without changing the nesting depth, so <html> stays flush left.

Is this a validator? Will it fix broken markup?

No. It does not check or repair HTML. Unclosed tags (a <div> or <li> without its closing tag) simply leave the indentation one level too deep from that point on, which is often a useful hint about where the markup is broken.

Can it format the CSS and JavaScript inside <style> and <script>?

Their code is kept intact and shifted to the right indentation level as a block, but not reformatted line by line. To tidy a stylesheet itself, paste it into the CSS formatter.

Is my HTML sent to a server?

No. Formatting and the preview both happen in your browser tab.