HTML Formatter Online

What this tool does

The tool reads your markup the way browsers do. It follows the HTML tokenizer for tags, quoted, unquoted and valueless attributes, comments, the DOCTYPE and raw text, and a simplified version of the browser's tree builder for void elements such as <br> and <img>, optional end tags such as </li> and </p>, elements that end others (a <div> closes an open <p>), tables, <select>, <template>, and SVG or MathML, where <path /> really is self-closing. Formatting only changes whitespace: no tag is added or removed, and attributes keep their order, quotes and case. Because whitespace is rendered in some places and not in others, each gap is judged by the default CSS display of the elements around it. Next to a block element such as <div>, <p>, <li> or <td> whitespace is not shown, so blocks go on their own lines. Between inline content (text, <a>, <span>, <strong>, <img>, <button>) a space is shown, so a run of spaces and newlines becomes one space, but a space is never removed and never added where there was none. Text inside <pre>, <textarea>, <script>, <style> and <title>, inside SVG <text>, and inside any element whose style attribute sets white-space: pre, is copied exactly. Minified mode removes the whitespace that is not shown and every <!-- comment --> except conditional comments such as <!--[if IE]>; it can also drop quotes that are not needed and shorten disabled="disabled" to disabled. When tags overlap, as in <b><i>x</b></i>, or content sits directly inside a <table>, browsers rebuild elements and a new line break could change the result, so in that case the tool only re-indents whitespace that is already there. The tool cannot see your stylesheets: if CSS makes list items inline-block, or sets white-space: pre through a class, check those parts of the output.

Example input and output

<nav class="site"><ul><li><a href="/">Home</a></li><li><a href="/docs/">Docs</a></li></ul></nav><main><h1>Release notes <small>v2.1</small></h1><p>Builds are <strong>faster</strong> now.<br>Upgrade with:</p><pre><code>npm install example-cli@2.1</code></pre></main>

<nav class="site">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/docs/">Docs</a></li>
  </ul>
</nav>
<main>
  <h1>Release notes <small>v2.1</small></h1>
  <p>
    Builds are <strong>faster</strong> now.<br>
    Upgrade with:
  </p>
  <pre><code>npm install example-cli@2.1</code></pre>
</main>

<p>Our plans:
  <ul>
    <li>Free</li>
    <li>Pro</li>
  </ul>
</p>

<p>Our plans:
<ul>
  <li>Free</li>
  <li>Pro</li>
</ul>
</p>

Line 2, column 3: <ul> closes the <p> opened on line 1
Line 6, column 1: </p> without an open <p>: browsers insert an empty paragraph here

<article>
  <!-- intro -->
  <h2>Install</h2>
  <p>Run <code>npm  install</code> and <em>restart</em>
     the server.</p>
  <pre>
npm install
npm start</pre>
</article>

<article><h2>Install</h2><p>Run <code>npm install</code> and <em>restart</em> the server.</p><pre>
npm install
npm start</pre></article>

Common errors and fixes

Unclosed <span>: it is still open at </div>

An element was not closed before its parent ended, so the browser closes it there for you. That is often harmless, but it can be a missing </span> in the wrong place, which makes the styling spill further than intended. Add the end tag where the element should end.

</span> is ignored: <div> (line 1) is still open inside <span>

Browsers ignore an end tag when a block element opened inside it is still open, so the <span> stays open and swallows what follows. Close the inner <div> first, or avoid putting a <div> inside a <span>.

<ul> closes the <p> opened on line 1

A paragraph can hold only text and inline elements. A <div>, <ul>, <table> or heading ends the open <p>, and a later </p> then creates an extra empty paragraph. Use a <div> as the container, or close the paragraph before the block.

<script/> is not self-closing in HTML

In HTML a "/" before > is ignored on elements that are not void, so <script src="app.js"/> stays open and treats the rest of the page as script; <div/> stays open too. Write <script src="app.js"></script>. Only void elements (<br>, <img>, <input> …) and SVG or MathML elements may end with />.

<p> directly inside <table> is moved before the table

Content in a table that is not inside a cell is "foster-parented": browsers move it in front of the table. Put it inside a <td> or <th>, or move it outside the table.

</b> closes <b> while <i> (line 1) is still open

The tags overlap: <b><i>x</b></i>. Browsers repair it by splitting and re-nesting elements, which may not be what you meant. Close the inner element first: <b><i>x</i></b>.

Duplicate attribute class on <div>

An attribute can appear only once per element. Browsers keep the first value and silently ignore the rest, so class="a" class="b" gives just class="a". Merge them: class="a b".

Common use cases

• Reading minified HTML from a build, a CMS export or View Source
• Finding the unclosed or stray tag that breaks a layout
• Tidying markup copied from DevTools, an email builder or a design tool
• Minifying an HTML snippet or email template without touching pre, script or style
• Checking a hand-edited page before a deploy

Privacy and security notes

• Your HTML is parsed and formatted by JavaScript in this browser tab. It is not sent to DevPrix or stored on a server.
• The markup is never rendered or run: the output is shown as highlighted text, so scripts, event handlers such as onerror, iframes and forms in it do nothing, and nothing it refers to (stylesheets, images, scripts, links) is fetched.
• Share copies a link that carries your input after the # in the URL. Browsers do not send that part to servers, but anyone you give the link to can read it, so do not share links that contain credentials or personal data.

Frequently asked questions