HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [19]
As of this writing, there is not yet a validator for HTML 5 code. That will change as soon as HTML 5 becomes mainstream. In the meantime, validate for XHTML Strict and you’ll be more than prepared for the HTML 5 switch.
Validating Your Page
To explain all this, I created a Web page the way Aesop might have done in ancient Greece. Okay, maybe Aesop didn’t write his famous fables as Web pages, but if he had, they might have looked like the following code listing:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
The Oxen and the Wheels
From Aesop’s Fables
A pair of Oxen were drawing a heavily loaded wagon along a
miry country road. They had to use all their strength to pull
the wagon, but they did not complain.
The Wheels of the wagon were of a different sort. Though the
task they had to do was very light compared with that of the
Oxen, they creaked and groaned at every turn. The poor Oxen,
pulling with all their might to draw the wagon through the
deep mud, had their ears filled with the loud complaining of
the Wheels. And this, you may well know, made their work so
much the harder to endure.
“Silence!” the Oxen cried at last, out of patience. “What have
you Wheels to complain about so loudly? We are drawing all the
weight, not you, and we are keeping still about it besides.”
They complain most who suffer least.
The code looks okay, but actually has a number of problems. Aesop may have been a great storyteller, but from this example, it appears he was a sloppy coder. The mistakes can be hard to see, but trust me, they’re there. The question is how do you find the problems before your users do?
You might think that the problems would be evident if you viewed the page in a Web browser. The Firefox and Internet Explorer Web browsers seem to handle the page decently, even if they don’t display it in an identical way. Figure 2-2 shows oxWheels1.html in Firefox, and Figure 2-3 shows it in Internet Explorer.
Firefox appears to handle the page pretty well, but From Aesop’s Fables is supposed to be a headline level two, or H2, and it appears as plain text. Other than that, there’s very little indication that something is wrong.
Microsoft Internet Explorer also tries to display the page, and it does a decent job. Notice that From Aesop’s Fables appears to be a level one header, or H1. That’s odd. Still, the page looks pretty good in both browsers, so you might assume everything’s just fine. That gets you into trouble.
Figure 2-2: oxWheels1.html in Firefox.
Figure 2-3: oxWheels1.html in Internet Explorer.
If it looks fine, who cares if it’s exactly right? You might wonder why we care if there are mistakes in the underlying code, as long as everything works okay. After all, who’s going to look at the code if the page displays properly?
The problem is, you don’t know if it’ll display properly, and mistakes in your code will eventually come back to haunt you. If possible, you want to know immediately what parts of your code are problematic so you can fix them and not worry.
Aesop visits W3C
To find out what’s going on with this page, pay a visit to the W3C validator at http://validator.w3.org. Figure 2-4 shows me visiting this site and uploading a copy of oxWheels1.html to it.
Hold your breath and hit the Check button. You might be surprised at the results shown in Figure 2-5.
The validator