How to compare HTML
Add two HTML files
Drop the files, or paste the source of each page. To copy a live page, open it and use your browser's View Source.
Set what to ignore
Whitespace and comments are ignored by default. Add attribute names like data-id or nonce to skip them.
Review the changes
See changed text, new and removed elements and edited attributes, each with its location in the page.
What Matchcheck does
Understands HTML structure
Pages are compared as a tree of elements, so a re-indented block or a moved line break doesn't count as a change.
Class order ignored
class="btn primary" and class="primary btn" are treated as the same.
Word-level highlights
When text changes, the exact words that changed are highlighted.
Safe to use
Pages are read as data, never run, so scripts in the HTML don't execute and images don't load.
Questions and answers
Does it run the scripts in my HTML?
No. Matchcheck reads the HTML as data. Scripts aren't run and external files aren't loaded.
Can I compare two live web pages by URL?
Not by URL yet. Open each page, view its source and paste it in. This also keeps private or logged-in pages private.
Does it compare CSS and visual layout?
It compares the HTML, including inline styles and style tags as text. It doesn't compare how the pages look when displayed.
Is it useful for email templates?
Yes. It's a quick way to check what changed between two versions of an HTML email or CMS template.
More comparison tools
Compare XML files
Find missing, added and changed elements and attributes between two XML files.
Compare text
Compare any two texts or code files line by line, with changed words highlighted.
Compare JSON
Spot added, removed and changed keys and values, even when the order is different.
Compare PDF files
See which words and paragraphs changed between two versions of a PDF.