<p>I receive HTML pages from our creative team, and then use those to build aspx pages.  One challenge I frequently face is getting the HTML I spit out to match theirs exactly. I almost always end up screwing up the nesting of <code>&lt;div&gt;</code>s between my page and the master pages.</p>

<p>Does anyone know of a tool that will help in this situation -- something that will compare 2 pages and output the structural differences? I can't use a standard diff tool, because IDs change from what I receive from creative, text replaces <i>lorem ipsum</i>, etc.. </p>

[{'answer_id': 48674, 'author': 'DrFloyd5', 'author_id': 1736623, 'author_profile': 'https://Stackoverflow.com/users/1736623', 'pm_score': 2, 'selected': False, 'text': '<p>If out output XML compliant HTML. Or at least translate your HTML product into XML compliancy, you at least could then XSL your output to remove the content and id tags. Apply the same transformation to their html, and then compare.</p>\n'}, {'answer_id': 48675, 'author': 'Gulzar Nazim', 'author_id': 4337, 'author_profile': 'https://Stackoverflow.com/users/4337', 'pm_score': 1, 'selected': False, 'text': '<p>I was thinking on lines of <a href="http://msdn.microsoft.com/en-us/library/aa302294.aspx" rel="nofollow noreferrer">XML Diff</a> since HTML can be represented as an XML Document.\nThe challenge with HTML is that it might not be always well formed. Found one more here showing how to use <a href="http://msdn.microsoft.com/en-us/library/aa302295.aspx" rel="nofollow noreferrer">XMLDiff class</a>. </p>\n'}, {'answer_id': 48699, 'author': 'Xian', 'author_id': 4642, 'author_profile': 'https://Stackoverflow.com/users/4642', 'pm_score': 0, 'selected': False, 'text': '<p>winmerge is a good visual diff program</p>\n'}, {'answer_id': 49348, 'author': 'Peter Hilton', 'author_id': 2670, 'author_profile': 'https://Stackoverflow.com/users/2670', 'pm_score': 3, 'selected': False, 'text': '<p>You can use <a href="http://tidy.sourceforge.net/" rel="nofollow noreferrer">HTMLTidy</a> to convert the HTML to well-formed XML so you can use <a href="http://msdn.microsoft.com/en-us/library/aa302294.aspx" rel="nofollow noreferrer">XML Diff</a>, as Gulzar suggested.</p>\n\n<pre><code>tidy -asxml index.html\n</code></pre>\n'}, {'answer_id': 1593331, 'author': 'elhoim', 'author_id': 171469, 'author_profile': 'https://Stackoverflow.com/users/171469', 'pm_score': 1, 'selected': False, 'text': '<p>A copy of my own answer from <a href="https://stackoverflow.com/questions/31722/anyone-have-a-diff-algorithm-for-rendered-html/1593296#1593296">here</a>.</p>\n\n<hr>\n\n<p>What about <a href="http://code.google.com/p/daisydiff/" rel="nofollow noreferrer">DaisyDiff</a> (<a href="http://code.google.com/p/daisydiff/" rel="nofollow noreferrer">Java</a> and <a href="http://www.mediawiki.org/wiki/Visual_Diff" rel="nofollow noreferrer">PHP</a> vesions available).</p>\n\n<p>Following features are really nice:</p>\n\n<ul>\n<li>Works with badly formed HTML that can be found "in the wild".</li>\n<li>The diffing is more specialized in HTML than XML tree differs. Changing part of a text node will not cause the entire node to be changed.</li>\n<li>In addition to the default visual diff, HTML source can be diffed coherently.</li>\n<li>Provides easy to understand descriptions of the changes.</li>\n<li>The default GUI allows easy browsing of the modifications through keyboard shortcuts and links. </li>\n</ul>\n'}]
['https://Stackoverflow.com/questions/48669', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2757/']