Can minifying change how my page looks?

It should not. Whitespace is removed only next to block-level elements, where a browser does not render it; between inline elements it is collapsed to a single space, never removed. The contents of , , and are untouched unless you turn on CSS minification. Selectors that match an attribute value, such as [disabled="disabled"], stop matching once the value is collapsed, so turn that option off if your CSS or scripts rely on one.

Does it format the JavaScript and CSS inside the page?

No. Beautifying leaves and exactly as written, since re-indenting a template literal or a CSS string would change it. Minifying can minify CSS in elements and style attributes with the site’s CSS minifier; inline JavaScript is never changed.

Why are my omitted and tags not added?

Because they are not needed: HTML defines where each of those elements ends, and a browser closes it there. The beautifier keeps your markup as written and indents it by the structure a browser builds. For the same reason the minifier does not remove optional end tags either.

Does it work with templates such as Jinja, Handlebars or PHP?

Only partly, and it says so. Template tags such as {{ x }} and {% for %} are formatted as text, which is fine between elements but can break inside a tag, and is read as a comment that ends at the first >, as a browser would read it. Format the rendered HTML for reliable results.

No. Formatting and minifying run entirely in your browser; large documents are handled in a background worker on your own machine, not on a server.

Programming

HTML Formatter, Beautifier and Minifier

Paste HTML to indent it one element per line, or switch to Minify to remove what a browser ignores. The spaces between inline elements, and everything inside <pre>, <textarea>, <script> and <style>, are left exactly as they render.

Indent

HTML3 lines

Output25 lines

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Pricing</title>
  </head>
  <body>
    <header>
      <nav><a href="/">Home</a> <a href="/pricing">Pricing</a></nav>
    </header>
    <main>
      <h1>Pricing</h1>
      <p>Every plan includes <strong>unlimited</strong> projects.</p>
      <ul>
        <li>Starter
        <li>Team
        <li>Enterprise
      </ul>
      <pre>
$ acme deploy
  done in 1.2 s</pre>
      <button class="btn">Start free trial</button> <button class="btn btn-ghost">Talk to sales</button>
    </main>
  </body>
</html>

Only whitespace a browser ignores is changed. Spaces between inline elements stay, and the contents of <pre>, <textarea>, <script> and <style> are left exactly as written.

This tool runs entirely in your browser. Your input is never uploaded, stored or logged.

How it works

Whether whitespace in HTML matters depends on where it is, so the input is parsed the way a browser parses it before anything is moved. Next to a block-level element such as <div>, <p>, <li> or <table>, at the start or end of one, and between the children of elements that never render text, like <ul>, <tr>, <select> and <head>, whitespace is not rendered: the beautifier puts a line break and indentation there, and the minifier removes it. Between inline elements and text it renders as a space. In "a <b>c</b>" that space is part of the sentence, and between two links or buttons it is the gap you see, so it is never added or removed there, only collapsed to one space or, where the source already broke the line, re-indented. Elements the formatter does not know, including custom elements, count as inline, because that is how a browser displays them. The test suite checks that the rendered text of every sample is identical before and after.

Some content is never reflowed. The inside of <pre>, <textarea>, <script> and <style> is kept byte for byte, including the line break after <pre> that a browser drops, and so is any element styled white-space: pre, pre-wrap or pre-line inline or with Tailwind’s whitespace-pre classes; a class defined in your own stylesheet cannot be seen. Nothing else is rewritten when beautifying: entities, attribute quotes, the case of tag names and end tags you left out, such as </li> or </td>, stay as written, and one blank line is kept between blocks wherever the source had any. With "Wrap attributes" on, a start tag longer than 80 columns puts each attribute on its own line. Problems a browser repairs silently, such as misnested tags or an end tag that closes nothing, are listed under the output.

Minifying removes comments except the ones that do something: IE conditional comments such as  bindings. Boolean attributes lose a value that is empty or repeats the name, so disabled="disabled" becomes disabled, but hidden="until-found" and enumerated attributes such as draggable="true" keep theirs. Quotes are removed, if you ask, only where the HTML syntax allows an unquoted value: not empty, and without spaces or any of " ' = < > `. CSS in <style> and style attributes can be minified by the same minifier as the CSS tool; JavaScript is never touched. End tags that HTML lets you omit are not removed, because doing that safely needs the full tree-construction rules. Input over 100,000 characters is processed in a background worker.

Common problems

Every example below is run against this tool in our test suite, so what it says here is what the tool actually does.

The <img> tag on line 2 is cut off before its closing >.

<div>
  <img src="logo.png" alt="Logo"

Why:: A tag with no closing >, usually from copying part of a page. A browser drops an unfinished tag without a word, so formatting the rest as if nothing were wrong would silently delete it.
Fix:: Copy the complete element, or add the missing > yourself.

The <a> tag on line 1 opens an attribute quote that is never closed, so a browser drops the tag and everything after it.

<p>Read the <a href="/docs>documentation</a> first.</p>

Why:: A missing closing quote makes the value run on to the next quote in the file. With none left, a browser drops the tag and everything after it; with one further on, the markup in between becomes part of the attribute and disappears from the page.
Fix:: Close the quote: href="/docs". If text vanished from a page without any error, look for the same mistake further up.

Two links ran together, or gained a space, after formatting elsewhere.

Why:: A formatter that puts every element on its own line adds a space between inline elements such as <a>, <span> and <button>, because a line break renders as a space. Minifiers that strip all whitespace between tags do the opposite and remove the space in "a <b>c</b>".
Fix:: Nothing to do here: whitespace is only added or removed next to block-level elements, and inline content keeps exactly the spaces it had.

Code in a <pre> block lost its indentation after beautifying.

Why:: Inside <pre>, <textarea> and anything styled white-space: pre, every space and line break is displayed. Re-indenting that content, or adding a line break after <pre>, changes what the page shows.
Fix:: Nothing to do here: their contents are kept byte for byte. An element made white-space: pre by a class in your own stylesheet cannot be detected; use <pre> or an inline style for it.

Outlook stopped showing part of an email after minifying it.

Why:: Email templates hide Outlook-only markup in conditional comments such as . A minifier that removes every comment removes those too.
Fix:: Nothing to do here: conditional comments,  comments are kept; only ordinary comments are removed.

Frequently asked questions

Can minifying change how my page looks?: It should not. Whitespace is removed only next to block-level elements, where a browser does not render it; between inline elements it is collapsed to a single space, never removed. The contents of <pre>, <textarea>, <script> and <style> are untouched unless you turn on CSS minification. Selectors that match an attribute value, such as [disabled="disabled"], stop matching once the value is collapsed, so turn that option off if your CSS or scripts rely on one.
Does it format the JavaScript and CSS inside the page?: No. Beautifying leaves <script> and <style> exactly as written, since re-indenting a template literal or a CSS string would change it. Minifying can minify CSS in <style> elements and style attributes with the site’s CSS minifier; inline JavaScript is never changed.
Why are my omitted </li> and </p> tags not added?: Because they are not needed: HTML defines where each of those elements ends, and a browser closes it there. The beautifier keeps your markup as written and indents it by the structure a browser builds. For the same reason the minifier does not remove optional end tags either.
Does it work with templates such as Jinja, Handlebars or PHP?: Only partly, and it says so. Template tags such as {{ x }} and {% for %} are formatted as text, which is fine between elements but can break inside a tag, and <?php … ?> is read as a comment that ends at the first >, as a browser would read it. Format the rendered HTML for reliable results.
Is my HTML uploaded?: No. Formatting and minifying run entirely in your browser; large documents are handled in a background worker on your own machine, not on a server.

Last updated 29 September 2026