Why does the minifier leave a space between two inline tags?

Because that space renders. In " one two " the gap is the space between the words, and removing it would print "onetwo". Whitespace is only dropped where it touches a block-level tag such as div, p, li or tr, where the browser discards it anyway.

Does it minify the CSS and JavaScript inside the page?

No. The contents of and are passed through byte for byte, and so are and , whose whitespace is content. The minifier only touches markup.

Can minifying change how a page looks?

In one case: a block element that a stylesheet gives white-space: pre or pre-wrap, whose layout depends on the whitespace between its child tags. Turn off "Drop space between blocks" and every run of whitespace is kept as a single space instead.

Why did Prettier leave a short element on one line?

Prettier keeps an element on one line while it fits within the wrap width and none of its children contain elements of their own. Once a child has children, or the line runs past the width, it breaks and indents. That is its rule, not a setting here.

What does the whitespace option do?

It is Prettier’s whitespace sensitivity. "As CSS renders it" keeps the spacing that affects inline text, which is the safe default. "Strict" treats every whitespace as significant. "Ignore" lets Prettier reflow freely and can change what a page shows, so use it only on markup that has no inline text.

HTML Formatter & Minifier

runs in your browser

Beautify HTML with Prettier, or minify it without changing how it renders: comments out, whitespace collapsed, inline spacing and pre blocks kept.

Output

Indent

Wrap at

Whitespace

Prettier re-indents the markup. The code inside <script> and <style> is re-indented but not rewritten.

HTML

Formatted

about this tool

Formatting

Formatting is done by Prettier's HTML printer, the same one most editors run on save. It is large, so it downloads the first time you format rather than with the page. Indentation and the wrap width are yours to set; the rest is Prettier's judgement, which has one rule worth knowing: an element stays on a single line while it fits and none of its children has children of its own. <div><p>hi</p></div> stays as it is; give the paragraph a <b> and the div breaks onto three lines.

The whitespace option is Prettier's whitespace sensitivity. The default, "as CSS renders it", preserves any spacing that changes how inline text displays and reflows everything else, which is what you want for a real page. "Strict" treats all whitespace as meaningful and produces denser, odder-looking output that is guaranteed not to alter rendering. "Ignore" lets Prettier lay the markup out however reads best, and can move a space into or out of existence between inline elements, so it suits templates and component markup rather than prose.

The code inside <script> and <style> is re-indented to sit under its tag but is not otherwise touched. Prettier would need its CSS and JavaScript printers for that, which are as large again as the HTML one.

Minifying

The minifier is written here rather than borrowed, and it is deliberately conservative. It does exactly three things:

Removes comments, except conditional comments (<!--[if IE]> and friends), which are code for old browsers and are kept. Turn comment removal off and they all stay.
Collapses whitespace. Every run of spaces, tabs and newlines in text becomes one space. Where that whitespace touches a block-level tag — div, p, li, tr, h1 and so on, plus the document's edges — it is removed altogether, because a browser discards it there anyway. Between inline elements it is always kept as one space: <b>one</b> <i>two</i> keeps its gap, or the words would fuse.
Tightens tags. <button type="submit" disabled > becomes <button type="submit" disabled>. Attribute values are never touched, so a value with two spaces in it keeps both.

It does not rewrite anything else. Quotes stay, tag case stays, boolean attributes stay as written, and no element is ever removed or renamed. The saving comes out lower than an aggressive minifier would report, and the page renders identically, which is the trade this tool makes on purpose.

Four elements are passed through byte for byte: <pre> and <textarea>, whose whitespace is their content, and <script> and <style>, whose bodies are not markup. A note under the output says so when any of them is present.

The one caveat

Dropping whitespace beside block tags assumes those blocks render with normal white-space handling. A block that a stylesheet has given white-space: pre or pre-wrap, and whose layout leans on the gaps between its child tags, would tighten. It is rare, and if you have such a page, switch off "Drop space between blocks": every whitespace run is then kept as a single space, which is still much smaller than the original and cannot change any rendering.

Errors

Prettier's parser reports a stray or mismatched closing tag with its line and column, and the tool shows that under the input. The minifier is more forgiving, since browsers are: it only stops for a tag, comment or <script> that is never closed, which it also reports by position. It does not check that your document is valid HTML, only that it can be read.

questions

Why does the minifier leave a space between two inline tags?: Because that space renders. In "<b>one</b> <i>two</i>" the gap is the space between the words, and removing it would print "onetwo". Whitespace is only dropped where it touches a block-level tag such as div, p, li or tr, where the browser discards it anyway.
Does it minify the CSS and JavaScript inside the page?: No. The contents of <script> and <style> are passed through byte for byte, and so are <pre> and <textarea>, whose whitespace is content. The minifier only touches markup.
Can minifying change how a page looks?: In one case: a block element that a stylesheet gives white-space: pre or pre-wrap, whose layout depends on the whitespace between its child tags. Turn off "Drop space between blocks" and every run of whitespace is kept as a single space instead.
Why did Prettier leave a short element on one line?: Prettier keeps an element on one line while it fits within the wrap width and none of its children contain elements of their own. Once a child has children, or the line runs past the width, it breaks and indents. That is its rule, not a setting here.
What does the whitespace option do?: It is Prettier’s whitespace sensitivity. "As CSS renders it" keeps the spacing that affects inline text, which is the safe default. "Strict" treats every whitespace as significant. "Ignore" lets Prettier reflow freely and can change what a page shows, so use it only on markup that has no inline text.