DiffKit / HTML compare
HTML compare
Diff two HTML files or snippets by structure, with indentation and attribute order normalised, or by the visible text only when you want to proofread a copy change.
Two ways to diff HTML
Markup is for developers. A minified template and a hand-indented one become the same shape, so in the example the only highlighted lines are the new featured class, the price rise from $12 to $15, the extra list item and the changed link. Visible text is for editors and QA: it compares what a reader would see, which makes it easy to spot a changed price or a missing sentence in a template.
Entities are decoded before comparing, so & and & inside text count as the same character. For strict XML or XHTML documents, use the XML compare, which rejects markup that isn’t well-formed.
Questions people ask
What is the difference between “Markup” and “Visible text” mode?
Markup mode compares the HTML structure: tags, attributes and text, re-indented one element per line. Visible text mode strips the tags, scripts and styles and compares only the words a visitor would read, one block (paragraph, heading, list item) per line. Use it to proof copy changes.
Will invalid HTML break the comparison?
No. DiffKit uses the browser’s HTML parser, which follows the WHATWG HTML standard’s error recovery, so unclosed tags are handled the same way a browser would handle them.
Does attribute order count as a change?
Not with “Sort attributes” ticked. class="a" id="b" and id="b" class="a" produce the same element, so they are normalised before diffing.
Can I compare two live web pages?
Open each page, use “View source” (Ctrl+U or Cmd+Option+U), copy the HTML and paste it into each box. Fetching pages directly isn’t possible because browsers block cross-site requests.