WP-Mix

Here are some notes and markup examples for adding links to the W3C’s online HTML and CSS validators. This will enable your visitors to check any page on your site.

Link to HTML Validator

To create a dynamic link to the HTML validator, all you need is the following markup:

<a href="http://validator.w3.org/check/referer" rel="nofollow" title="Validate as HTML5">HTML5</a>

For the HTML Validator, the W3C checks the referrer, so the validator should always check the correct/current page.

For the type of markup, here we specify that it’s “HTML5”, but as you can see that information in no way changes the actual URL that is requested. Instead, the validator determines the type of HTML by checking for meta tags in the markup. So as long as you’re declaring the type of HTML/markup in the source code, the simple referrer link given above is all that’s needed for dynamic page validation.

Link to CSS Validator

To create a dynamic link to the CSS validator, use the following HTML/PHP:

<a href="http://jigsaw.w3.org/css-validator/validator?uri=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?>" rel="nofollow" title="Validate as CSS3">CSS3</a>

When checking CSS, it’s necessary to specify the URL for the uri parameter. This technique uses a couple of server variables to grab and send the data.

Note: the W3C and other online validators are useful for checking code against standards, but there are many cases where the validator simply fails to provide accurate and/or useful results. For example, there are all sorts of browser-specific vendor-prefixed CSS selectors that are considered invalid by the W3C validation service. Best advice here is to use the validators to improve your code, but don’t take the results too seriously — validation results are guidelines, not laws.