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 “HTML 5”

If you use the following buttons or text links, make sure you also use the HTML 5 DocType on the page:
<!DOCTYPE HTML>

Here is the code for text links:

<div>
<a href="http://validator.w3.org/check?uri=referer">Valid HTML 5</a>
&nbsp;&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
</div>

The text links will look like this on your page:

Valid HTML 5    Valid CSS

Note that the W3C has not yet released official button images for HTMl 5 validation as it has for the other standards, as seen below.

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>
&nbsp;&nbsp;
<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:

Valid XHTML 1.0 Strict    Valid CSS!

Here is the code for text links:

<div>
<a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a>
&nbsp;&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
</div>

The text links will look like this on your page:

Valid XHTML    Valid CSS

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>
&nbsp;&nbsp;
<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:

Valid HTML 4.01    Valid CSS!

Here is the code for text links:

<div>
<a href="http://validator.w3.org/check?uri=referer">Valid HTML</a>
&nbsp;&nbsp;
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a>
</div>

The text links will look like this on your page:

Valid HTML    Valid CSS