DocsSkillsMCPAboutCompare JSONCompare XML

Getting Started

Comparing two HTML documents is a common task when reviewing template output, UI changes, or scraped page snapshots. This guide walks you through the entire process using Compare HTML — from entering your data to reading the results.

Paste or Upload Your HTML

Open Compare HTML and paste the two HTML documents you want to compare into the Base and Contrast editors. You can also drag and drop a .html file or load HTML from a URL.

Run the Comparison

Click the Compare button. The tool parses both inputs into DOM trees, normalizes whitespace, and recursively compares the HTML structure.

How Structural Comparison Works

Unlike text-based diff tools, Compare HTML understands DOM structure. It parses each input into a virtual DOM tree and compares nodes semantically, so formatting changes do not create false positives.

Because HTML is parsed into a DOM before comparison, differences in indentation, line breaks, or extra spaces between attributes are ignored. Attribute order is also treated as irrelevant. Only structural and content changes are reported.

The tool handles complete HTML documents including <!DOCTYPE>, <html>, <head>, <body>, comments, and nested elements. You can compare fragments or full pages.

Reading the Results

After running a comparison, Compare HTML presents differences in a structured, color-coded view.

Added (green)

Elements or text nodes that appear only in the contrast HTML are shown in green.

<!-- Base -->
<div>
  <p>Hello</p>
</div>

<!-- Contrast -->
<div>
  <p>Hello</p>
  <p>World</p>
</div>

The second <p> element is reported as added.

Deleted (red)

Elements or text nodes removed in the contrast HTML are shown in red.

Value Changed (yellow)

When an element exists in both documents but an attribute value or text content differs, the change is highlighted in yellow.

<!-- Base -->
<div class="container">Alice</div>

<!-- Contrast -->
<div class="wrapper">Alice</div>

The class attribute change is reported as a value change.

Element path context

Each difference includes the full element path, such as html > body > div.main > p::text, so you know exactly where the change occurred. The result sidebar lists counts for each diff type; click a type to filter the view.