HTML Compare

Compare two HTML documents with formatted, live diffs.

0 lines
0 lines
Sample Swap Open original Open changed Copy diff Download .diff Clear

About the HTML Compare Tool

What is an HTML compare tool?

An HTML compare tool shows you exactly what changed between two versions of a page or snippet: added and removed elements, edited attributes, and changed text — each highlighted down to the individual words. Paste both versions and the diff updates live, with a similarity score and counts of added and removed lines on top.

Raw HTML is awkward to diff because the same markup can be written on one line or fifty. That's why this tool pretty-prints both documents first: tags are indented by nesting depth, void elements like <img> and <br> are handled correctly, and the contents of <script>, <style>, and <pre> blocks are preserved exactly as written. The result is a stable, line-by-line comparison that works even when one side is minified. Everything runs in your browser — nothing you paste leaves your machine.

How to Use This Tool

  1. Add both documents. Paste the original markup on the left and the changed version on the right, drag .html files onto the boxes, or use the Open buttons. Sample loads a demo pair.
  2. Let the formatter align them. With Format HTML on (the default), both sides are indented identically before comparing.
  3. Read the highlights. Removed markup shows red on the left, added markup green on the right, and edited lines highlight the exact attributes or words that changed.
  4. Tune the comparison. Ignore case helps with inconsistent tag casing, Ignore whitespace with indentation-only edits, and Only show differences hides identical lines.
  5. Export. Copy the diff or download it as a .diff file.

Common Use Cases

  • Comparing rendered output: Diff what your CMS, framework, or template engine generated before and after a change.
  • Debugging email templates: Find the markup difference between the version that renders correctly and the one that doesn't.
  • Monitoring page changes: Compare snapshots of a page's source to see what an update, plugin, or third party actually modified.
  • Reviewing sanitizer output: Check precisely which tags and attributes a sanitizer or minifier stripped from your markup.
  • Merging template edits: Reconcile two diverged copies of a partial or component template.

Validating a single document instead? Use our HTML Validator or HTML Formatter, or compare styles with the CSS Compare tool.

Frequently Asked Questions

Can I compare minified or single-line HTML?

Yes. With Format HTML enabled, both documents are pretty-printed with one tag per line and depth-based indentation before the diff runs, so a minified page compares cleanly against a readable one instead of appearing as a single changed line.

Are script, style, and pre contents compared?

Yes, and they are treated with care: the formatter keeps the contents of script, style, textarea, and pre blocks exactly as written, without re-indenting or collapsing whitespace, so embedded JavaScript, CSS, and preformatted text diff faithfully.

Does attribute order matter?

The comparison is textual, so class="a" id="b" versus id="b" class="a" shows as a modified line, with the word-level highlight making the reordering obvious. Attribute values themselves are compared exactly as written.

Does my HTML need to be valid?

The diff itself works on any text. The formatter is tolerant, it knows void elements, clamps runaway indentation, and passes unrecognized syntax through, but wildly malformed markup formats best with Format HTML switched off.

Why do I see whitespace-only differences?

If formatting is off, indentation changes count as text changes. Either leave Format HTML on so both sides share identical indentation, or enable Ignore whitespace to compare content only.

Is my HTML private?

Yes. Formatting and comparison run entirely in your browser with JavaScript. Nothing you paste is uploaded, stored, or logged, and the tool keeps working offline once the page has loaded.