HTML Diff Checker

How to compare two HTML documents

1. Paste the original markup into Before and the revised markup into After.
2. Choose Upload under either panel to load an .html or .htm file.
3. Choose Source diff for line additions and removals, or choose Rendered preview for the cleaned versions.
4. In the preview view, use Zoom to change the scale of both preview frames.
5. Leave Highlight structural changes checked to mark added and removed elements in the previews.

What an HTML source diff shows

After you edit either panel, the result area reports Similarity, Lines added, Lines removed, Lines unchanged, and Elements changed. Source diff compares lines after converting Windows line endings to line breaks. Rendered preview displays the cleaned result in the Before and After frames.

Before: <p>Hello</p>
After:  <p>Hello!</p>
Source diff: one removed line, one added line

The result area appears when either panel contains text. An empty panel is compared as an empty side. Source diff and Rendered preview are separate views, so a changed source line is not linked to its rendered element.

How the HTML rendered preview is sanitized

Before a preview loads, the code removes script, iframe, object, embed, applet, imported links, refresh meta elements, and base elements. It also removes event-handler attributes, srcdoc, and javascript: values from inspected href, src, action, formaction, and xlink:href attributes.

Each cleaned document loads in a sandboxed iframe without script permission. The comparison code does not upload the entered text, but ordinary external resource URLs can remain in the cleaned markup and a preview may request them. Source diff uses the entered text; sanitization changes the rendered preview only.

When structural highlights appear

With Highlight structural changes enabled, the tool compares the sequence of rendered elements. Each element is represented by its tag name, id, sorted class names, and attribute count. Added and removed signatures receive outlines in the corresponding preview. A text-only change can appear in Source diff without an element outline.

Preview controls and their limits

Zoom ranges from 50% to 150% in 10% steps and changes the scale of both frames. The Preview width control displays Full, Tablet, and Mobile, but the current script does not connect those buttons to a width change.

Scroll positions are synchronized after both preview documents finish loading. If you change the HTML, the tool creates new preview documents and wires the scroll listeners again.

HTML comparison tools for other formats

Use Compare Text, Code, Lists, HTML, LaTeX & Markdown to choose a comparison page for another format. Code Diff Checker is the better choice for code snippets with syntax highlighting, line numbers, and whitespace controls. For plain prose, use Text Difference Checker & Comparison Tool, which reports word-, line-, or character-level text changes. If the documents are Markdown, Markdown Diff Checker compares semantic blocks and includes rendered previews.

Frequently asked questions