If two links touch after HTML minification, check the space between their tags before changing their styling. That character may be part of the visible text. This guide shows how to keep it, then test the result before replacing a template.
Why a space between tags can matter
Consider this fictional workshop menu. The links have no margins or padding and use ordinary inline layout:
<a href="/classes/">Classes</a> <a href="/book/">Book a seat</a>The space after the first closing tag separates the labels. Removing it produces:
<a href="/classes/">Classes</a><a href="/book/">Book a seat</a>The labels can now appear as ClassesBook a seat. HTML whitespace can become text nodes; CSS determines how those characters appear. Under normal whitespace handling, a sequence of spaces may collapse to one visible separator. Deleting that sequence removes the separator entirely. MDN explains this distinction in its guide to handling whitespace.
Keep the separator in the HTML Minifier
- Keep an editable copy of the original template. Start with the small link fragment above so the change is easy to inspect.
- Open the HTML Minifier and paste the fragment into Paste your HTML.
- Untick Remove whitespace between tags. For this check, leave comment removal selected and leave attribute quote removal and boolean attribute collapsing off.
- Click Minify HTML. Confirm that the output still has
</a> <a, including the single space. - Use Copy after reviewing the output, then compare the original and result in a test page with the same stylesheet.
Selecting the between-tags option removes the separator in this example. Unticking it preserves this single gap. Change one option at a time so you can identify which transformation affected the page.
Unticking one option does not preserve every character
The tool still collapses repeated spaces, tabs and line breaks outside the blocks it protects. Treat the unchecked setting as a way to retain this separator, not as a promise that every whitespace-sensitive fragment will remain identical. Review the actual output whenever exact spacing matters.
Use CSS for deliberate navigation spacing
A word separator and the designed distance between menu items serve different purposes. For a row of navigation links, you can make that distance explicit with a flex container and gap:
<nav class="workshop-links" aria-label="Workshop">
<a href="/classes/">Classes</a>
<a href="/book/">Book a seat</a>
</nav>.workshop-links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}Here, the gap belongs to the layout. MDN documents how gap works with flex containers. Test the wrapped row at a narrow width before adopting it. Keep ordinary spaces within sentences containing inline links or emphasis; turning a sentence into flex items changes its layout.
Check content that preserves whitespace
CSS can make repeated spaces and newlines visible. For example, white-space: pre-wrap preserves them while allowing text to wrap, as described in the white-space reference. A plain element styled this way still needs review; its tag name alone does not explain its spacing requirements to a simple minifier.
Check code samples, pasted text and template fragments separately. If you are displaying markup inside an article, first distinguish executable HTML from escaped code using the guide to displaying HTML code as text.
Review before replacing the original
- Read sentences across link and emphasis boundaries for joined words.
- Compare menu spacing and line wrapping at desktop and mobile widths.
- Check whitespace-sensitive content and any scripts that depend on text nodes.
- Reject the result if it changes the intended content or layout, even when the size is smaller.
If you also change a stylesheet, review that transformation separately with the minified CSS checklist. Keep the source version so you can correct a spacing regression without rebuilding the page from its compressed output.