Hixie's Natural Log

2002-06-12 10:36 UTC Buzz: Shooting the messenger

The Web Standards Project recently unveiled themselves again. This time their message seems aimed more at Web authors and Web users than Web browser developers.

Isn't it sad, then, to see that their own Web site has several common errors? Sure, it validates, but that's only because the validators are merely checking that the documents follow the relevant DTDs, not that they are following all the rules of the specs. (In their defence, this site is better than most. However, given their message, they should be perfect.)

Let's take a look at the www.webstandards.org markup. The first thing we notice is that it is sent as text/html, but it contains XHTML. While that's technically allowed by the specs, it makes no sense... XHTML and HTML are technically incompatible. (For example, <br/> in XHTML is actually equivalent to <br>&gt; in HTML.) What really makes no sense is that the whole point of XML (the basis of XHTML) was that it should avoid the mistakes that tag soup created... all XHTML markup on the web should be valid. But if you send XHTML as text/html, then browsers will treat it as plain old HTML (i.e. tag soup) and not complain about errors! You can see this demonstrated very well by mpt's Web log (see what the validator makes of it). XHTML is great; but if you use it, sending it as text/html totally defeats the point. (It's XML. Send it as text/xml. Like this site.)

The next thing we notice about the WaSP's markup is their stylesheet.

It contains mistakes such as not setting backgrounds and colours together, setting hover rules for anchors as well as links (David Baron has written a nice page explaining this issue), and positioning blocks using pixels instead of ems or percentages, which is why the site fails at unusual font sizes.

Back to the XHTML markup, we start noticing some much more serious problems.

<div id="Header">

Excuse me? What is <h1> for?

<img id="logo" ... alt="Web Standards Project logo" />

Rather inappropriate alternate text... the image doesn't say "Web Standards Project Logo", it says "Web Standards Project".

Below that we find a paragraph of text that is left semantically neutral (it should be wrapped in a <p> element). Then, only a few lines lower, we find presentational classes: <div class="padder">. That's followed by an <h1> just above an <h3>, skipping an entire level of headings (<h2>). We're also faced with a bunch of empty paragraphs, which makes no semantic sense.

In conclusion, while the message is the right one, the messenger is confused. Standards Compliance is a laudable goal, but it's not blind obediance to the validator which will bring us that; it's structurally correct markup with well written stylesheets, using appropriate technologies at appropriate times.