HTML Formatter

1. Paste markup, drop an .html, .htm, .xhtml or .vue file, or choose Load example. Fragments work as well as full documents.
2. Leave Whitespace sensitivity on CSS (safe) unless you know the whitespace between inline elements does not matter.
3. Copy with ⌥/Alt C or download with ⌘/Ctrl S. Use Minify to compress it, or Switch to CSS and Switch to JavaScript to work on extracted code.

#One-line page

A whole document on a single line, as it often appears in "view source" or a server response.

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Demo</title></head><body><nav class="top"><ul><li><a href="/">Home</a></li><li><a href="/docs">Docs</a></li></ul></nav><main><h1>Hello</h1><p>Formatted <strong>HTML</strong> is easier to review.</p><img src="logo.svg" alt="Logo"></main></body></html>

Result:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Demo</title>
  </head>
  <body>
    <nav class="top">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/docs">Docs</a></li>
      </ul>
    </nav>
    <main>
      <h1>Hello</h1>
      <p>Formatted <strong>HTML</strong> is easier to review.</p>
      <img src="logo.svg" alt="Logo" />
    </main>
  </body>
</html>

#Embedded CSS and JavaScript

Style and script blocks are formatted with the CSS and JavaScript printers, not left as one long line.

<style>.btn{color:#fff;background:#4f46e5}</style>
<button class="btn" onclick="track('signup')">Sign up</button>
<script>document.querySelector(".btn").addEventListener("click",()=>{console.log("clicked")})</script>

Result:

<style>
  .btn {
    color: #fff;
    background: #4f46e5;
  }
</style>
<button class="btn" onclick="track('signup')">Sign up</button>
<script>
  document.querySelector(".btn").addEventListener("click", () => {
    console.log("clicked");
  });
</script>

#Whitespace sensitivity set to Ignore

With Ignore, every inline element may go on its own line. Compare with the input: the rendered text now has spaces between "10" and "USD" that were not there before.

<p>Price: <b>10</b><i>USD</i></p>

Result:

<p>
  Price:
  <b>10</b>
  <i>USD</i>
</p>

With the default CSS setting, the same input is returned on one line, unchanged.

• Print width — the line length (80, 100 or 120) after which Prettier breaks attributes and child elements onto new lines.
• Tab width — spaces per indentation level, 2 or 4, applied to markup and to embedded CSS and JavaScript.
• Whitespace sensitivity — CSS (safe) respects each element's default display value, so inline elements are never split in a way that changes rendering; Strict treats all whitespace as significant; Ignore treats none of it as significant and gives the most compact indentation.

#"Unexpected closing tag"

A closing tag has no matching opening tag — for example </span> inside a <div> that never opened a span. The error gives the line and column. Remove the stray tag or add the missing opening tag.

#Unclosed tags were closed for me

HTML allows optional end tags, so <div><p>Hello</div> is valid: the parser closes the <p> where the browser would. The formatter prints that implied structure as <div><p>Hello</p></div>. If that is not what you meant, the input was ambiguous.

#Strange >< line breaks

This is the CSS (safe) whitespace mode protecting inline spacing. Choose Ignore if the spacing between those elements does not matter to your layout.

#Template syntax fails to parse

Server-side template tags such as {% if %} or <?php ?> inside attributes are not HTML, and the parser may reject them. Format the rendered output instead, or the static parts of the template.

#Minify left the inline CSS and JavaScript untouched

The HTML minifier is deliberately conservative: it removes comments and collapses whitespace outside <pre>, <textarea>, <script> and <style>, and it does not rewrite the code inside them. Compress those separately with the CSS Minifier and JavaScript Minifier.

#How do I pretty print HTML from a single line?

Paste it and the output pane shows it indented, one block element per line, with attributes wrapped once a tag passes the print width. Void elements such as <img> and <meta> are printed with a self-closing slash. Text content is kept, and inline elements stay on the same line as the text around them.

#Will formatting change how my page looks?

With the default CSS (safe) whitespace sensitivity, no: line breaks are only added where the browser ignores them. The Ignore setting can add or remove visible spaces between inline elements, as the example above shows. Choose it only for markup where spacing between inline elements does not matter.

#Can I format HTML email templates?

Yes. Table-based email layouts with inline style attributes format well; each <tr> and <td> gets its own line and style declarations are normalized, for example font-size:24px becomes font-size: 24px. Conditional comments for older mail clients are kept. Keep the default whitespace setting so text inside cells is not re-spaced.

#Does it format Vue single-file components?

.vue files are accepted, but they are parsed as plain HTML rather than as Vue components. Attributes such as v-if, :prop and @click are kept exactly, yet markup nested inside a root <template> element may be left on the lines you wrote it on. For the script block, copy it into the JavaScript Formatter or TypeScript Formatter.

#Is it safe to paste internal pages?

Yes. Prettier runs in your browser, in an isolated editor frame that blocks network requests, so markup containing internal URLs or customer data is not uploaded or stored on a server. Linked images and scripts in your HTML are never fetched. Settings are remembered on this device; input is kept only with "Remember my last input".

#Is XML supported here?

The HTML parser is lenient in ways XML is not, so XML documents, SOAP envelopes and SVG files are better formatted with the XML Formatter, which validates well-formedness and reports errors accurately. For Markdown documents with embedded HTML, use the Markdown Formatter.

In HTML, a line break between two inline elements renders as a space. That is why a formatter cannot freely move <b> and <i> onto separate lines: it would insert visible spaces. The CSS (safe) mode knows which elements are inline by default and breaks lines only where it is invisible, sometimes using the >< "hugging" style Prettier is known for. Strict applies the same care to every element, which suits custom elements styled as inline. Ignore is appropriate for markup where layout does not depend on text spacing, such as templates made mostly of block elements.

Tidy the stylesheet with the CSS Formatter, beautify page scripts with the JavaScript Formatter, or browse all code tools.