HTML5 Compare is a Web application that compares two HTML5 files to produce an HTML5 result showing the differences.

The comparison takes a few seconds, perhaps 30 for a very long document, after this, you should see the HTML result. This resulting HTML document is initially in ‘View Both’ mode, it shows the combined inputs, with red and green highlighting showing deletions and additions.

Alongside the ‘View Both’ button on the toolbar, there are two further buttons: ‘View A’ and ‘View B’. Clicking on these allows you to switch between the 'A' and 'B' document views as required.

How it Works

XML Compare is the comparison engine that lies at the heart of this tool. XML Compare is then wrapped by a configurable pipeline of XSLT and Java-based input and output filters that control comparison features such as word-by-word, id-keying, whitespace, table content and image binaries. The XML-based XML Compare pipeline is fed by, a standards-based HTML5 parser at the input and serialises via a complementary parser to produce standard HTML5 output.

Key Comparison Features

  • HTML5-aware
  • word-by-word
  • whitespace management
  • images (binary comparison)
  • table structure alignment
  • id-based keying
  • link resolving
  • CSS links

Managing Resource Links

To help visualise changes, it is important to try to keep the result view consistent with the original content. Therefore relative links to resources, such as those in href and src attributes are resolved to absolute references. This means that images should appear as expected in the rendered HTML and also that you can follow links as required.