How to use
To use our free online HTML compare tool, just follow these steps:
- Use Copy & Paste or click
Load File
to load the documents you want to compare - If the HTML data is difficult to read (e.g. contains no line breaks), click the
Prettify
buttons - Click
Compare
You should now see a side-by-side comparison of your HTML tags and text. The diff still shows the original documents you entered, but the two documents are now aligned with each other. Red and green highlighting helps you see where they differ.
Tags, attributes or text that is only present on the left side is highlighted in red while elements that are unique to the right side set are highlighted in green.
If there is a lot of overlap between the two versions of your HTML documents, identical areas are excluded from the diff to help you focus on the actual changes.
Check out our documentation to learn more.
How it works
The tool compares HTML tags, attributes and text by first parsing them into a data structure that is independent of their textual representation. This helps us interpret them in the same way as a browser would do. Afterwards a set of rules is applied to filter out changes that do not modify the rendering of the document. This includes ignoring changes such as adding/removing unnecessary whitespace, changing the casing of a tag or changing the order of classes in a class
attribute.
The remaining changes are then mapped back to the text you inserted to highlight the modifications. Our tool does not reformat your HTML input to help you locate the changes in the original input. If you like, you can still reformat your input using the Prettify
buttons before diffing.
Offline usage
Our online HTML diff tool requires an internet connection to work because the computation is performed on our servers. If you are looking for a semantic HTML comparison that works offline, you may want to check out our SemanticDiff Visual Studio Code extension. It can not only compare HTML files but also supports various other programming languages and data formats. The extension performs all computations locally, so your data never leaves your machine.