Blog 1

Random Talk on Random Thoughts

Added W3C Validated Logos to Some Pages

| Comments | ∞

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

HTML code for embedding the validation icon for HTML 4.01 Strict
1
2
3
4
5

<p>
  <a href="http://validator.w3.org/check?uri=referer"><img
    src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict"
    height="31" width="88"></a>
</p>

Problem

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

</source> 404 not found

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. ↩

Comments