XHTML5 is a stricter version of HTML5 where checks of the syntax and grammar are applied more rigourously.
In standard HTML5 parsing, some web browsers may be more tolerant than
others when it comes to errors such as missing </p>
or </li> tags. This can lead to differences in the
internal DOM tree and sometimes subtle differences in behaviour and
the way CSS is applied, which can be hard to debug.
Hence, it is good practice to write clean XHTML5 and to validate it, so as to catch unintended mistakes (analogous to linting source code).
The web site:
provides online validation of XHTML5 (or more precisely the current living version of HTML or XHTML).
.xhtml
The trick is to temporarily rename/copy your file to give it the
extension .xhtml, and then choose Check by File Upload in
the dropdown menu.
Files with a .xhtml extension are subjected to strict
XHTML5 validation. Files with a .html extension are
parsed with very liberal error tolerance (not what we want).
A single error in your XHTML5 source code (such as a missing closing paragraph tag) can often produce a cascade of follow-up error messages. The output should look something like Figure 1.
Fix the errors one at a time, starting at the top. Fixing one error often eliminates several error messages. Then validate again.
Once all validation errors have been eliminated, a screen similar to the one in Figure 2 will be shown.
Finally, rename your file back to the extension .html.
We want clean valid XHTML5 source, but we want to serve it to the
browser as HTML5.
I really like TotalValidator Basic, but it is unfortunately no longer free. The new free version is called TotalValidator Test and only produces summary statistics, rather than a line by line error report.
For the time being, use the free version of TotalValidator Basic v 11.7.0 from 09 Oct 2017, which is archived (for Windows) at:
https://web.archive.org/web/20171124013416/http://totalvalidator.com/downloads/TotalValidatorBasic.exe
Once installed, set the validator to check for XHTML 5.2 (do not check Accessibility or CSS), then Browse to the file you want to check. The panel should look something like Figure 3. Press Validate and the results will appear in a browser window.
If the HTML5 file contains validation errors the corresponding line numbers will be highlighted, as shown in Figure 4. Fix the errors one at a time, starting at the top. Fixing one error often eliminates several error messages. Then validate again.
Once all validation errors have been eliminated, a screen similar to the one in Figure 5 will be shown. Done.
