How to Put HTML and CSS Validate Buttons on Your Page
To make it easy to use the W3C validators, paste the following HTML code into your page's code. Then you will have buttons (or text links) that, when clicked on, will tell you whether or not the page's code is valid.
These buttons also let users know that your page is following the proper HTML and CSS standards, and provides them with a link to the W3C's validators to confirm this.
You can use code that places either buttons or text links onto your page. Place
this code within the <body> section, probably just before
the </body> tag.
For “XHTML 1.0 Strict”
If you use the following buttons or text links, make sure you also use the
XHTML 1.0 Strict DocType on the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Here is the code for buttons (image links):
<div>
<a href="http://validator.w3.org/check?uri=referer"
style="background-color: transparent">
<img style="border-style:none" width="88" height="31"
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid
XHTML 1.0 Strict" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"
style="background-color: transparent">
<img
style="border-style:none" width="88" height="31"
src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid
CSS!" /></a>
</div>
The buttons will look like this on your page:
Here is the code for text links:
<div>
<a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid
CSS</a>
</div>
The text links will look like this on your page:
For “HTML 4.01 Transitional”
If you use the following buttons or text links, make sure you also use the
HTML 4.01 Transitional DocType on the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Here is the code for buttons (image links):
<div>
<a href="http://validator.w3.org/check?uri=referer"
style="background-color: transparent">
<img style="border-style:none" width="88" height="31"
src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"
style="background-color: transparent">
<img
style="border-style:none" width="88" height="31"
src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid
CSS!"></a>
</div>
The buttons will look like this on your page:
Here is the code for text links:
<div>
<a href="http://validator.w3.org/check?uri=referer">Valid
HTML</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid
CSS</a>
</div>
The text links will look like this on your page:
For “CSS Level 3”
When you use the W3C’s HTML validator, the validator will look at the DocType at the very beginning of your page code to decide which standards (HTML or XHTML, Strict or Transitional) it will use to validate your page. But the DocType does not say anything about the CSS standard that your page uses. So when you use the W3C’s CSS validator, the CSS validator will automatically use the current stable CSS standard (as of this writing, CSS Level 2.1) when it validates your styles. So if your CSS uses a new property that exists only in CSS Level 3 (such as the "opacity" property), you need to tell the CSS validator to check your page against the CSS Level 3 standard rather than the 2.1 standard. You do this by adding some code to the validator URL. Here is sample code to tell the CSS validator that your styles use CSS Level 3:
Here is the code for a button (image link):
<div>
<a href="http://jigsaw.w3.org/css-validator/check?profile=css3&uri=referer"
style="background-color: transparent">
<img style="border-style:none" width="88" height="31"
src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid
CSS!" /></a>
</div>
The button will look like this on your page:
Here is the code for a text link:
<div>
<a href="http://jigsaw.w3.org/css-validator/check?profile=css3&uri=referer">
Valid
CSS 3
</a>
</div>
The text link will look like this on your page: