An HTML page can become smaller while its code example loses indentation or blank lines. Review the code block separately from the surrounding markup. Spaces that look redundant in a page template may be intentional characters in the example readers need to copy.
This walkthrough uses a short fictional Python example with the HTML Minifier. It checks the source transformation and the saved page; the minifier does not execute or validate the example program.
Use a wrapper that represents preformatted code
The HTML pre element represents preformatted text. A code element identifies a code fragment; MDN recommends a pre wrapper for a multiline code example.
The current minifier protects complete pre blocks before collapsing ordinary whitespace. That is a specific implementation behavior, not a guarantee that every element styled to look like code receives the same protection.
If the example itself contains HTML markup, its text still needs appropriate escaping: pre does not make raw tags display literally. Follow the separate HTML code display guide for that step.
Minify a small sample with a protected block
Keep an editable original and paste this HTML fragment into Paste your HTML. The return line begins with four spaces, and a blank line separates the function from its final call:
<!-- layout note -->
<pre><code>def label(name):
return "Hello, " + name
print(label("Ria"))</code></pre>
<p> Example complete. </p>- Keep Remove comments (keep conditional) checked.
- Keep Remove whitespace between tags checked for this isolated fixture.
- Leave Remove quotes around simple attribute values and Collapse boolean attributes unchecked.
- Select Minify HTML and compare the complete output with the original.
The sample uses ordinary line feeds and has no extra newline after its final paragraph. Preserve those details when reproducing the size comparison.
Check the code characters before accepting the size reduction
For this input, the current output is:
<pre><code>def label(name):
return "Hello, " + name
print(label("Ria"))</code></pre>
<p> Example complete. </p>The outside comment disappears and the repeated paragraph spaces shrink. The complete pre block retains its original characters: the four-space indent, blank line, punctuation and quoted name. For this exact line-feed fixture, the size changes from 141 bytes to 116 bytes. Those numbers describe this example, not a general compression target.
Check each of those features before using Copy. A smaller output is unsuitable if it changes the example readers will receive.
Check a CSS-styled container separately
CSS can also preserve whitespace on an ordinary element. The white-space reference explains that white-space: pre preserves sequences of whitespace. However, this minifier does not inspect computed styles to decide what text to protect.
Try this separate control with the same settings:
<div style="white-space: pre">first
second
third</div>The current output becomes:
<div style="white-space: pre">first second
third</div>The newline and indentation before second have collapsed. A preformatted appearance created by CSS does not protect that source from this transformation. If a code example needs preformatted semantics, use an appropriate wrapper and test it. For other spacing-sensitive containers, choose a processing workflow that preserves their required content.
Verify line endings and the final page
The minifier normalizes carriage-return line endings to line feeds before protecting blocks. A CRLF copy of the sample therefore does not retain identical original bytes, even though the code remains arranged on the same lines. Preserve the original whenever exact file bytes matter.
Preview the saved page with its actual stylesheet. Compare indentation, blank lines and long-line behavior at a narrow width, then copy the displayed example back into an editor and inspect it. Browser parsing and CSS can affect presentation independently of the minifier; for example, a newline directly after an opening pre tag has special parsing behavior.
Also check nearby inline text before replacing a larger template. Our inline spacing guide covers separators between links. Keep the editable source until the code sample and its surrounding page both pass review.