Hide unchanged sections in a website redesign diff

A website redesign can change a handful of links or replace whole sections. When a diff includes every unchanged line around those edits, it becomes hard to spot what actually changed.

You can reduce the noise by setting the diff to show zero unchanged context lines, then add context back when an edit is difficult to understand. The steps below cover a typical text comparison viewer and Git, so you can choose the method that fits your files.

Hide unchanged lines in a diff

1. Save the before and after versions. Keep separate copies of the original and redesigned file, such as before.html and after.html. If you need help preparing the text to compare, see how to compare copied website text with an edited version.
2. Open both versions in a comparison view. Choose the two files or text versions you want to compare. In a diff viewer, look for an option called Context lines, Unchanged lines, or similar, and set it to 0. The exact label depends on the viewer.
3. Use Git if you want a precise text diff. Open a terminal in the folder containing both files and run git diff --no-index --unified=0 before.html after.html. Git prints changed lines with no unchanged lines around them. The files stay as they are. If Git reports that the files differ, that is the expected result.
4. Expand context for edits you cannot interpret. Change the context setting to 2 or 3, or rerun the command with --unified=3. A few surrounding lines can show whether a changed heading belongs to the right section or a link points to the intended page.

In a comparison viewer, additions and deletions are often marked with different colors. In Git output, lines starting with + were added, and lines starting with - were removed. A line beginning with @@ marks a changed block, also called a hunk. With zero context, the hunk header and the changed lines remain, while unchanged lines are omitted.

The Git command works in Windows Terminal or PowerShell and in Terminal on macOS, as long as Git is installed. If you use a visual diff viewer instead, you do not need to run a command. Set its unchanged-line context to zero and compare the same two saved versions.

Choose how much context to keep

Zero lines for a quick scan

Use zero context when you want a compact list of edits across several pages. It is useful for checking that expected copy, links, or HTML attributes changed. It can be harder to tell where a short changed line belongs, especially when the same text appears several times.

Two or three lines for review

A small amount of context makes most changes easier to place without bringing back the entire page. This is a good setting for reviewing content and markup together. If you are sharing the diff with a teammate, a few unchanged lines can make the change easier to review.

More context for structural edits

When a section has moved, been split, or been rewritten, use more context or compare the surrounding block directly. A very short diff can show the lines that changed but hide the structure that explains why. The goal is to remove clutter, not make the edit impossible to understand.

Fix a diff that is still hard to read

1. Check that you chose the right versions. Compare the original file with the redesigned file, not two copies of the same version. Use clear filenames or folders so you can tell which one is before and which one is after.
2. Compare one file at a time. If you are reviewing a full redesign, start with the main HTML file, then check its stylesheet or other relevant files separately. A combined comparison can bury a small content edit among unrelated changes.
3. Look for formatting-only changes. A formatter may reindent every line or change line endings, making a small redesign look like a large rewrite. Keep formatting consistent between versions. If you use Git, --ignore-space-at-eol can disregard spaces at line endings, but do not ignore all whitespace when spacing or indentation is meaningful to the code.
4. Increase the context temporarily. If an isolated line is unclear, switch from zero to two or three context lines. Confirm which element or section it belongs to before deciding whether the edit is correct.
5. Check the rendered page separately. A text diff shows source changes, not the final layout. Open the redesigned page in a browser and check its spacing, navigation, mobile layout, and links. A clean diff cannot prove the page looks right or works correctly.

Why website diffs can look larger than the redesign

HTML and CSS files may change even when the visible page barely changes. A formatter can alter indentation, a content system can rewrite markup, and a redesigned component can move unchanged text to a different location. If a moved block appears as a deletion followed by an addition, the comparison may not recognize that it is the same content in a new position.

Use a zero-context diff to locate changed lines, then review a little context around any important change. For a final website review, also check the rendered page at the screen sizes your visitors use. That gives you a compact source comparison without treating the diff as a substitute for checking the redesign itself.