HTML Diff Online
Compare HTML files or snippets and find differences instantly.
When an HTML diff is the right tool
HTML changes often hide in a large file: a new navigation link, a rewritten heading, an extra stylesheet, or a footer that was not there last week. Two copies of a page can look almost the same in an editor and still disagree in a way that breaks a layout or a test. An HTML diff is for that moment. You put the previous source on the left, the new source on the right, and read every added, removed, or replaced line instead of scanning both files by eye.
This page compares markup as text. It does not render the pages, and it does not build a DOM. If you only need to tidy a single file, use the HTML Formatter. If the document is well-formed XML, XML Diff is usually a better starting point, because it can re-indent tags before comparing. The guide to comparing XML online covers formatting noise and attribute order in more depth, and the same cautions apply here.
Use cases
Reviewing a template or a static page
A marketing page or an email template often changes in a few visible places: a title, a paragraph, a new call-to-action. Pasting the old and new markup makes each of those edits a marked line, so a review can confirm the copy change without rereading the unchanged header and scripts.
Checking a component or a navigation snippet
You do not need a full document. A single nav, a card component, or a form fragment is enough. Load Sample on this page uses a short complete page so you can see a heading change, a new link, and an added footer in one pass.
Ignoring indentation noise
Exports and IDE auto-formatters often wrap or indent the same markup differently. Turn on Normalize whitespace before you compare if one side is messy and you care about the tags and text, not the spaces around them. Leave it off when you specifically want to see wrapping and blank-line changes.
How the comparison works
When you choose Compare, the two panes are compared line by line, using the same style of alignment you see in a typical unified or split diff. Identical lines stay across from each other. A line that exists only on the left is marked as removed. A line that exists only on the right is marked as added. You can switch between split and unified views, and copy the unified result if you need a record.
If Normalize whitespace is on, each side is cleaned first: spaces and tabs on a line are collapsed to a single space, the line is trimmed, and empty lines are dropped. The option is off by default, and changing it clears the current result so you can compare again. It is not a pretty-printer and not an HTML parser. Attribute order, tag case, and the text inside a tag all stay as they were.
<main>
<h1>Welcome</h1>
<p>This is the homepage.</p>
</main>
<main>
<h1>Welcome to My Site</h1>
<p>This is the homepage. Enjoy your visit!</p>
</main>The main wrappers stay unchanged. The h1 and p lines appear as replacements. That is the kind of copy edit this page is meant to make obvious.
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>With Normalize whitespace off, the extra indent and the blank line are marked as changes. With the option on, both sides collapse to the same two <a> lines inside the nav, and the comparison reports no differences. Use that option when spacing is getting in the way, and leave it off when the spacing is the thing you came to inspect.
What this tool does not do
It does not render the page, run scripts, apply CSS, or compare a computed DOM. It does not pretty-print markup, sort attributes, or rewrite tag case. Invalid or incomplete HTML can still be compared, because the input is treated as text. Nothing is sent to a server. Very large pages can still be pasted, but they may make the tab feel slow.
How to use HTML Diff
- Paste the older or expected HTML into the original pane.
- Paste the newer HTML into the modified pane.
- Turn on Normalize whitespace if you want to hide indentation and blank-line differences. Leave it off to see those differences too.
- Choose Compare. Switch between split and unified views, and copy the result if you need to keep a record. Use Swap if the sides are reversed, Clear when you are finished, or Load Sample to try a short page first.
If you need to escape characters for HTML rather than compare two documents, use HTML Escape. To review the same change as Markdown, try HTML to Markdown first.
Frequently asked questions
What does Normalize whitespace actually change?
It is an optional, off-by-default cleanup of the text, not an HTML parser. On each line it collapses runs of spaces and tabs into a single space, trims the ends, and then drops blank lines. The two cleaned strings are what get compared. It does not re-indent tags, sort attributes, or rewrite the DOM.
If two tags have the same attributes in a different order, will they look identical?
Not in this tool. Attribute order is usually not significant in HTML, but the comparison is line-based. If the opening tag sits on one line and the attributes swap places, that line is marked as changed. Normalize whitespace will not fix that. Reorder the attributes to match, or treat that one-line difference as formatting.
Should I use HTML Diff or XML Diff?
Use this page for HTML, including documents that would not parse as well-formed XML (unclosed tags, attribute shortcuts, or an HTML doctype). XML Diff is the better starting point for SOAP, SVG that is well-formed XML, or other strict XML, and it has a pretty-print step aimed at tags. You can paste HTML there, but pretty-print may be imperfect.
Does this tool render the pages or compare the DOM?
No. It compares the source you paste, as text. Two pages that look the same in a browser can still differ in comments, attribute order, or formatting, and two sources that differ only in wrapping may look different here until you turn Normalize whitespace on.
Is my HTML sent to a server?
No. Comparison runs in your browser. Closing the tab discards what you pasted. Do not paste pages that contain secrets, tokens, or private user data if you would not be comfortable with them sitting in memory on this device.
Is there a file size limit?
There is no server-imposed limit, because nothing is uploaded. A few thousand lines is comfortable. A large exported page can make the tab feel slow; in that case, compare a smaller fragment or use a local tool.
Can I compare only a snippet, or do I need a full document?
Snippets are fine. The sample on this page is a full document so you can see a realistic change, but you can paste a single component, an email template, or a fragment of markup. There is no requirement that the HTML be complete or valid.
Related tools and guides
References
- The HTML Living Standard describes how browsers parse markup. This page does not run that parser; it compares the source text you paste, with an optional whitespace cleanup.
- For XML-specific documents, the W3C XML 1.0 rules about well-formedness and unordered attributes are a better reference, and the XML Diff page is usually the better tool.
- DOM-aware or rendered-page comparison tools exist when you need to know whether two pages look the same after CSS, not whether their source lines match.