Gearu Gearu - 1 month ago 16
CSS Question

W3C Validation results don't match source code in console?

I'm trying to validate a page, however, I'm getting some confusing results.

The W3C validation results are below: Errors 1,2,3 and 5,6,7 are all the same issue, where there is a mismatch with a h3 and h2.

This is what the W3C Validator shows for the source:
enter image description here

This is what I see in the console:
enter image description here

RESULTS FROM W3C VALIDATOR

HOME PAGE - http://web1c.snow.studiocoast.com.au/

https://validator.w3.org/nu/?showsource=yes&doc=http%3A%2F%2Fweb1c.snow.studiocoast.com.au%2F#l282c50

Error 1: End tag h2 seen, but there were open elements.
From line 282, column 46; to line 282, column 50
CURRENT NEWS****

Error 2: End tag h2 seen, but there were open elements.
From line 295, column 46; to line 295, column 50
SUBSCRIPTION****

Error 3: End tag h2 seen, but there were open elements.
From line 308, column 48; to line 308, column 52
OUR PHILOSOPHY****

Warning 4: Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.
From line 329, column 3; to line 329, column 100
area">↩↩ ↩↩




CLAIMS PAGE - http://web1c.snow.studiocoast.com.au/claims/

https://validator.w3.org/nu/?showsource=yes&doc=http%3A%2F%2Fweb1c.snow.studiocoast.com.au%2Fclaims%2F#l282c50

Error 5: End tag h2 seen, but there were open elements.
From line 326, column 45; to line 326, column 49
ESTIMONIAL****↩

Error 6: End tag h2 seen, but there were open elements.
From line 338, column 45; to line 338, column 49
ESTIMONIAL****↩

Error 7: End tag h2 seen, but there were open elements.
From line 350, column 45; to line 350, column 49
ESTIMONIAL****↩

Error 8: Forbidden code point U+0003.
At line 409, column 219
rney claim form

Answer

The w3c validator sends a request to the server (exactly the same way your browser does), gets the result (a text content, which is probably HTML structured) run the validation against this content.

However - when your browser receives the content of the page, it needs to parse it and make sure it's structure is valid (otherwise the browser will not be able to render the code), so it "fixes" some of the problems that you see in the validator. Moreover - your browser also runs any javascript code that exists in the page (which the validator don't), so if there is any changes to the DOM in your page that is done by javascript - the validator will not see these changes (while your browser will - when you "inspect" the elements).

If (for example) you will have the code <h2>some title</h3>, which is not valid - your browser will automatically change this to <h2>some title</h2> in order to render it correctly.

Note that when you "view source" in your browser - you get exactly the same thing that the validator does. When you "inspect element" (or go to the elements tab in the developers tool bar) you get the DOM of the pages after the browser fixed it and all javascript run).