How can I test functional equivalency between two different blocks of HTML?

I'm looking for a way (or perhaps tool) to run tests on HTML to to compare two HTML blocks and see if they are not literally the same strings, but if they are functionally equivalent. For instance:

<p class="caption" id="first">Text</p>

Should be functionally equivalent to:

<p id="first" class="caption">
    Text
</p>

In this case, the two lines have different whitespace, and also declare "id" and "class" in a different order, but are valid HTML, should render the exact same, and are the same HTML according to the HTML spec, but they would fail a string equivalency test.

I am not looking for a visual parity or rendering equivalency. So while these two lines might render the same, they are not equivalent HTML and hence I would want them to fail an equivalency test:

 <span style="font:'Times New Roman'; font-size:16px; display:block; margin:16px 0;">One</span> 

vs

 <p>One</p>