HTML Formatter

HTML Formatter

Paste or type HTML into the box, load the Example, or Open a file up to 5 MB (you can also drag it onto the page). Choose your options and click Format Code.

The result is shown with syntax colours, along with the number of lines and the size before and after. Copy it, or Download it. The download is named after the file you opened.

Formatting runs in your browser. Nothing you paste or open is uploaded.

Example

Minified HTML, all on one line:

<nav class=menu><ul><li><a href=/>Home</a></li><li><a href=/blog>Blog</a></li></ul></nav><p>Read our <a href=/guides/tea>brewing guide</a> before you start.</p>

Formatted with 2 spaces, with Quote attribute values and Break lines between block elements that touch switched on:

<nav class="menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>
<p>Read our <a href="/guides/tea">brewing guide</a> before you start.</p>

The nesting is visible at a glance, and the paragraph stays on one line. The text and link inside it flow together, so breaking them up would change what’s displayed.

Formatting that doesn’t change the page

Adding a line break in HTML isn’t always invisible. Between inline elements like links, a line break shows up as a space:

<a href="/">Home</a><a href="/blog">Blog</a>

displays as “HomeBlog”. Put each link on its own line and it becomes “Home Blog”. A formatter that adds line breaks wherever it likes can quietly change a page.

So this one only breaks lines at whitespace that’s already in the source, both for indentation and for wrapping long lines. The page looks exactly as it did before.

Break lines between block elements that touch is the one exception, and it’s off unless you switch it on. It puts block elements like <div>, <ul> and <p> on separate lines even where the source has no space between them, which is what makes minified HTML readable. Between ordinary block elements those breaks are invisible. If elements are styled as display: inline-block, though, as menu items often are, the new line breaks can appear as small gaps, so check the page afterwards.

Options

Indent with: 2 spaces, 4 spaces or tabs.

Wrap lines at: 80, 100, 120 or 160 characters, or no wrapping. Long text wraps only at spaces it already has. A tag that’s longer than the limit gets one attribute per line, which makes a long list of classes and data attributes much easier to scan.

Format inline JavaScript and CSS: the contents of <script> and <style> are laid out too, using js-beautify. Multi-line template strings in JavaScript keep their spacing, because re-indenting them would change the text they contain. JSON scripts, such as JSON-LD structured data, are laid out as well, so your schema markup is easy to read.

Keep blank lines: where the source has one or more empty lines between elements, one is kept. Sections you separated on purpose stay separated.

Lowercase tag and attribute names: <DIV CLASS="box"> becomes <div class="box">. Values are left as they are, and so is SVG, where names like viewBox and linearGradient are case-sensitive.

Quote attribute values: href=/ becomes href="/". Unquoted values are valid HTML, but quotes are safer when you edit: add a space to an unquoted value and it splits into two attributes.

Nothing is repaired or added

The formatter doesn’t change your markup’s meaning, so it doesn’t fix it either.

• Optional closing tags aren’t added. If a list leaves out its </li> tags (which HTML allows), the items are indented as if the tags were there, but nothing is inserted.
• Problems are reported, not changed. Notes under the result point out stray closing tags, elements that are never closed, a missing doctype, and which lines were wrapped. Template code and SVG, which the formatter handles carefully, are reported too.

Formatting is often the quickest way to find a bug: once the indentation is right, an element that was never closed shows up as everything below it being indented one level too deep.

What it’s useful for

• Reading a page’s source. “View source” on most sites shows minified HTML on one long line. Paste it here to see its structure.
• Finding nesting mistakes. Unclosed or misplaced tags stand out once everything is indented.
• Cleaning up exported code. HTML from page builders, email editors or WYSIWYG editors is often messy and inconsistently indented.
• Before committing to Git. Consistent formatting keeps diffs readable.

FAQ

Will formatting change how my page looks?

Not with the default settings, since line breaks are only placed where whitespace already exists. The one option that adds new breaks, Break lines between block elements that touch, can create small gaps between inline-block elements, so check the page if you use it.

Will it fix broken HTML?

No. It formats the HTML as it is and lists the problems it finds. To see how a browser actually renders your code, try it in the HTML Code Editor. For a full standards check, use the W3C Markup Validator.

How do I make the HTML small again?

Use the HTML Minifier. It removes the indentation and line breaks again without changing how the page looks.

Can I format CSS or JavaScript files on their own?

Yes, with the CSS Formatter and the JS Formatter.

Is my HTML uploaded anywhere?

No. Everything happens in your browser, and nothing you paste or open is stored.