# Added W3C Validated Logos to Some Pages

## Background

The web pages under /downloads/code/ don’t conform to the W3C’s standards. This afternoon, after I had rewritten the code and passed the HTML 4.01 Strict Test and CSS3 Test, I was given the code to embed the validation icons.1

## Problem

Unluckily, when I clicked on the icon for re-validation of the site, I got a 404 error.

</source>

## Cause

I wasn’t so patient to read the FAQ of the W3C. I googled “w3c validator referer”. Realising that the web pages hosted on the official website were similar to the FAQ, I clicked on the first blog article that I saw.2 I still didn’t know what’s wrong with my hyperlink on the validation icon.

## Solution

I refined my search by added the phrase “requested URL /check” surrounded by double quotes to the query string. Then, only four web pages were displayed. I glimpsed a mailing list and I didn’t found it useful. Although I believed that the hyperlink for a forum thread wouldn’t help me, I clicked it.3 It was in 2007, and the situtation differed much from this one. I clicked on an old-versioned hyperlink to the W3C’s HTML validator, and it worked. After that, I “inspected this element” and changed the destination to the current URL of the validator. It worked again.

I compared the code found on the forum post with mine, and I discovered that the only difference is the s in front of the domain name validator.w3.org. Knowing that some users may view the site using the HTTP protocol, I finally removed the beginning https: in the href attribute in that hyperlink. Now users may re-validate the page with a simple click on the validation icons.

## Lessons learnt

Through the validation process, I’ve learnt some HTML.

1. Always begin an HTML file with <!DOCTYPE HTML ...>.
2. Add a lang attribute in <html> for internationalization.
3. Add a <meta charset="UTF-8"> tag to tell the validator the character encoding of the page.
4. A <title> inside the <head> is necessary: without this, the vaildator won’t regard the <head> as closed.
5. In HTML 4.01 or earlier, avoid using a slash / before >.

i.e. Use <img ... foo="bar"> instead of <img ... foo="bar" />, <br> instead of <br/>, etc.

6. Images in HTML 4.01 Strict:

• an alternate text is needed
• specify the dimenstions of the picture (i.e. height="XX" witdth="YY")
7. Inline elements in HTML 4.01 Strict need to be wrapped by block-level elements like <p>, <div>, etc.
8. Forms in HTML 4.01 Strict need an action.
9. Use the charset attribute in <script> tags only for external scripts.
10. Using a hyperlink to http://validator.w3.org/check?uri=referer is more convenient than the manual way.

1. Here’s a sample screenshot.

2. How to Link to the W3C CSS3 Validation Page on Bryan Hadaway’s Web + Tech Blog

3. What happend to http://validator.w3.org/check/referer ? on W3c Discussion Forums