Is your XHTML bulletproof?

Jacques Distler‘s is. So is Yuan-Chung Cheng‘s. Dave Shea‘s working on it.

• Kosut: The MTValidate plugin.
• Pilgrim: MIME-type negotiation for Python, PHP, and static pages.
• Distler: MIME-type negotiation with Moveable Type.
• Distler: Validating comments.
• Distler: The StripControlChars plugin.
• Distler: Selecting text filters for comments.
• Cheung: Chaining text filters.
• Cheung: Using Chinese characters and MathML with application/xhtml+xml. Whoa.

The day’s just wasting away, isn’t it?

I keep my RSS subscriptions fixed at a manageable 20; Jeffrey Zeldman‘s got a permanent spot on my list. Zeldman is a superb designer and a hell of a writer. I love Zeldman bunches.

And yet as often as I find his comments on web standards illuminating, occasionally I’m forcibly reminded that deep down Zeldman is a Technology Evangelist. Evangelists are great at efficiently spreading new ideas throughout the community… but the flip side is that they often have trouble departing from certain orthodoxies.

For a prime example of this, see Zeldman’s Web Design World keynote. There’s plenty of good stuff in the keynote overall, but this particular slide needs addressing:

1. “XHTML is XML that acts like HTML in browsers.”

   Better to replace “acts like” with “is”, given that nearly all “XHTML” websites are actually parsed as HTML by all currently available browsers. (I suppose there are a rarified few sites that actually can be parsed as XML by certain highly advanced browsers, but this hardly counts as statistically significant.)

2. “It also works as expected in most Internet devices (Palm Pilots, web phones, screen readers).”

   There are some who would dispute that. Apparently many real-world mobile devices happily support old-skool HTML cruft (table-based layouts, the <font> tag) while ignoring the products of our more enlightened era (XHTML Basic, CSS). Weird but true.

3. “It’s as easy to learn and use as HTML.”

   Except you have to teach people about closing tags, proper nesting, encoding all your ampersands, and so on. Meanwhile, people who feel like writing tag soup HTML can just whip out a text editor and go. (Then again, considering the tremendous popularity of tag-soup XHTML on the web today, maybe this is a distinction without a difference.)

4. “It’s the current recommended markup standard (replaces HTML 4).”

   The closest the spec comes to saying this is, “The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content’s backward and future compatibility.” That’s a fine marketing blurb, but it’s not an official announcement that HTML 4.01 is deprecated.

5. “Because it’s XML, it works better with existing XML languages and XML-based tools (SVG, SOAP, RSS, SMIL, XSL, XSLT, databases, etc.).”

   This is pretty hand-wavy. On the server side, you can easily transform your backend data into valid XHTML, but you can also transform it into valid HTML 4.01 Strict just as easily. Heck, some people do both. On the client side, there are a tiny, tiny fraction of super-geeks who embed SVG or MathML directly in their valid and properly MIME-typed XHTML pages. These super-geeks are the only people in the world who have to present outward-facing XHTML; the rest of us are just fooling around.

6. “It brings consistency to web documents that was missing in HTML.”

   I assume this means “more consistency in coding style.” XHTML theoretically enforces more consistency due to its more rigorous syntax… but since the vast majority of people can’t be bothered to produce valid XHTML code, this benefit is somewhat obviated.

7. “It’s a bridge to more advanced (future) XML languages and applications and perhaps to more advanced versions of itself (XHTML 2?).”

   Heh.

The presentation then goes on to cite nine websites that are using structured XHTML and CSS, including some big names such as ESPN and Wired. None of the sites serve up their pages as application/xhtml+xml to browsers that accept this MIME-type, which means that each site is being treated as… you guessed it, good old fashioned HTML. And that’s a damn good thing, because four of the sites have invalid home pages, and four others have invalid secondary pages just one click away. The only site diligent enough to pass the “Laziness Test” is the CSS Zen Garden. (To his further credit, the creator of the Zen Garden is considering the MIME-type issues as we speak.)

Anyway. The point is not that cutting edge designs are bad; they’re not. The point is not that “Evan hates XHTML”; I don’t. XHTML allows you to do some amazing things that you can’t do with HTML. Unfortunately, due to the dreadfully primitive state of XML browsers and tools, there’s really nobody using XHTML for anything that you can’t do with HTML.[¹]

The real problem is that XHTML is being touted as a replacement for HTML. It’s not. XHTML is a different technology that suits different purposes. There are a lot of influential people who are blurring this distinction, and I’d like to think that they know better.

1. Except for a few oddball physicists, mathematicians, and chemists, but who’s counting them?

In the last installment of XHTML2 Explorations, we touched on how XHTML2’s attribute collections provide a rich variety of behaviors for nearly all elements. Today’s installment focuses on the individual elements themselves. As with Part I, this post does not discuss “well-known” XHTML2 concepts.¹

New Paragraph Model

XHTML2 gives us a new twist on our old friend the <p> tag. In previous versions of HTML and XHTML, you could not nest other block elements inside a paragraph. Now you can nest any block element except for another paragraph. In other words, you can now consider a list or table to be semantically part of a paragraph.

This leads to an interesting result (first brought to my attention by Jacques Distler). Consider the following (invalid) markup²:

  <p style="color: red">
    Why is Gordon better for Dana than Casey?
    <ul>
      <li>Knows mayor Giuliani</li>
      <li>Can dress self w/o assistance from Wardrobe</li>
      <li>Obvious physical prowess</li>
      <li>Two!! post-graduate degrees</li>
    </ul>
  </p>

Since a paragraph can’t contain lists, a standards-compliant browser would end the paragraph just before the start of the unordered list. Thus the words, “Why is Gordon…” would be colored red while the list items would remain unchanged.

However, under XHTML2’s new paragraph model this code is valid, and everything inside <p> and </p> would be red. I have to admit that from a coding standpoint, I like this. If nothing else, it matches my naive expectations a little better. (“Hey, why isn’t my list red?” the newbie web designer wonders…)

From a semantic standpoint, I’m a little less sure about this. I usually don’t think of my tables as being nested inside my paragraphs. Neither does Framemaker, for that matter. Is Framemaker broken? Am I broken? Well, maybe. The good thing about this model is that it’s totally optional — you can nest stuff inside paragraphs, or not. Works for me.

Scripting

You can now nest <script> elements and process them like the <object> element. If the browser understands the parent script, execute it; otherwise go on to the child script(s). It’s a nifty model, albeit one that is not backwards compatible. Whoops — I forgot, it’s not fair for us to harp on that. Sorry. Anyway, the model itself looks good, particularly if you want to script with multiple languages. The spec does take great pains to mention that there are scripting languages besides Javascript, such as… type="text/x-perl". Hmmm.

There is also a new declare attribute for both scripts and objects. This boolean attribute specifies whether the script or object is a “declaration only”, meaning that it is not to be processed until the user initiates some sort of action. And speaking of actions, there’s a brand-new events model defined by the XMLEVENTS standard (which is pleasantly short and easy to read). XMLEVENTS allows you to set any element as the observer or handler for standard DOM events. It also provides a generic <listener> element that can pass events off to handlers. The XMLEVENTS spec looks to be far more comprehensive and flexible than our current model, which involves slathering our code with onmouseover attributes and whatnot. The only catch is that XMLEVENTS has totally replaced the existing model, which means our current scripts all just went POOF!. Argh, there I go again…

The spec also declares the death of document.write:

Note that because of the XML processing model, where a document is first parsed before being processed, the form of dynamic generation used in earlier versions of HTML, using document.write cannot be used in XHTML2. To dynamically generate content in XHTML you have to add elements to the DOM tree using DOM calls [DOM] rather than using document.write to generate text that then gets parsed.

Well, that’s fair enough. The W3C seems to be saying, “Look guys, this is XML here. Not HTML, not some halfway-step that decays back into friendly tag-soup if you make a mistake — this is the real stuff here.” I suppose the real question is whether they’re going to forbid XHTML2 to be served up as text/html. I can’t find any discussion of MIME-type issues in the current spec, so it’ll be interesting to hear the W3C’s final decision on this.

Miscellany

• There’s a new <quote> element for marking up inline quotes. Unlike its ill-fated predecessor <q>, the <quote> element does not automagically insert localized quotation marks. “We give up,” the W3C is saying. “Insert your own damn quotation marks.”

• Tables are relatively untouched. The one noticeable change is that the summary attribute is now an element, presumably to provide a facility for richer descriptions. The spec makes no recommendations for how to display this content in visual browsers. I think we can assume that the default should be display: none, but you never know.

  I also noticed that the spec requires tables to have one or more <tbody> elements… but as it turns out, this requirement dates all the way back to HTML4! I must say this comes as quite a shock, given that the validator happily accepts pages with <tbody>-free tables as HTML 4.01 Strict. I’m looking at the spec again right now, and I’m still a bit freaked out over this. Do I not know how to read the spec? Am I hallucinating because I skipped lunch in preparation for the big Fourth of July BBQ? We report, you decide. (Edit: it turns out I can’t read the spec. Never post while under the influence of carbohydrate deprivation.)

• Finally, Ruby text is now a standard module. This is good news for hundreds of millions of Asian-language speaking users… at least, I think. Actually, this begs the question: if Ruby text is a fundamental component of Asian typography, why are we forcing Asian users to go all the way to XHTML2 to use it? It seems like it would be useful and straightforward to retrofit Ruby text onto HTML. Then again, since HTML is officially a dead specification, the point is moot.

Conclusions

Errr… who needs conclusions? It’s barbeque time. Happy Fourth!

1. My definition of “well-known” is “I remember hearing about it vaguely on someone’s blog somewhere.”

2. As for whether the pro-Gordon argument is as invalid as the markup… well, I leave that as an exercise for the reader.

You read that right: “XHTML2 Explorations”. Yes, the fun never stops here at goer.org.

I’ve decided to take a closer look at XHTML2, or more specifically, XHTML2 Working Draft 6. I’ll admit that I haven’t done a good job slogging through the thousands of messages on the W3C lists. I’m just a casual observer.

Fortunately, there’s been plenty of weblog chatter over the <object> replacing <img>, <cite> getting dropped and then added back, the excitement over <blockcode>, the battle over the style attribute, navigation lists, the new <h> and <section> model, the “href on everything” model, and more. The Alphas have been discussing these issues for months, and we Gammas have been well-served by just listening in.

But even with all the healthy public discussion, XHTML2 is a big specification (430 KB and counting). At least for my own edification, it’s time to see how deep the rabbit hole goes.

A Swarm of Attributes

XHTML2 provides a huge number of common attributes that are divided up into collections. Most XHTML2 elements accept attributes from all collections. The most well-known example of this is the “everything is a hyperlink” concept, wherein you can turn any XHTML2 element into a link by applying the href attribute.

But of course there’s much more. Consider the set of “common” attributes in HTML 4.01: there’s id, style, class, dir, lang, title, and the “event” attributes (such as onmouseover). This yields a little over 15 attributes, depending on how you’re counting. In contrast, XHTML2 already provides around 30 common attributes. Let’s take a closer look.

The Edit Collection

The Edit Collection provides an edit attribute with four allowed values: inserted, deleted, changed, and moved. Presumably if something is moved, you can specify where it moved to by using the href attribute. There’s also a datetime attribute for specifying the timestamp, the format of which is defined in XML Schema, which references ISO 8601, which has since been revised. Whew.

The default presentation should be display: none for deleted markup, while the other three types should be displayed as-is. Note that if we assume that the XHTML2 browsers of the future will have solid CSS2 support, then we can write:

  *[edit="deleted"] {
    display: inline;
    color: red;
    text-decoration: line-through;
  }

I’ll admit I like the idea of having a simple change record facility. However, there doesn’t appear to be an editedby attribute, which seems like a bit of an oversight.

The Embedding Collection

Through the Embedding collection, each element can have a src attribute. The browser attempts to replace the element’s content with the embedded file or resource. If the embedding fails for some reason, the browser proceeds to process the contents of the element. The spec provides an example involving a table:

  <table src="temperature-graph.png" type="image/png">
    <caption>Monthly temperatures</caption>
    ... (lots of table rows and cells) ...
  </table>

The spec also declares,

Note that this behavior makes documents far more robust, and gives much better opportunities for accessible documents than the longdesc attribute present in earlier versions of XHTML, since it allows the description of the resource to be included in the document itself, rather than in a separate document.

I scratched my head over the new src attribute for a while… but if you think of it as a replacement for the longdesc attribute, then it sort of makes sense. A couple of points, though.

First, a quibble with the W3C’s example — I’m not quite sure how replacing a perfectly good XHTML table with a PNG image constitutes a great leap forward under any circumstances.

Second, the W3C recommends:

This collection causes the contents of a remote resource to be embedded in the document in place of the element’s content. If accessing the remote resource fails, for whatever reason (network unavailable, no resource available at the URI given, inability of the user agent to process the type of resource) the content of the element must be processed instead.

Maybe I don’t understand this statement correctly, but I take the “instead” to mean that browsers should not continue to process content if the remote resource is accessible. If so, I certainly hope that the browsers ignore this recommendation. The browser doesn’t need to display the child content directly, but it needs to process the entire document and provide access to the child content somehow. Otherwise, accessibility gets worse, not better.

Finally, this concept opens up all sorts of interesting UI issues. Take the <table> example above. If I use my browser’s “Find Text In This Page” function, will the browser search the text in the table cells? How will it highlight successful matches?

The Cite Attribute

The Hypertext collection permits any element to have a cite attribute. At first glance, I thought that this made the <cite> element redundant. But as Mark Pilgrim points out in Semantic Obsolescence:

“No, the cite tag and the cite attribute are not the same thing. The cite attribute is a URL; the cite tag is wrapped around actual names within your text.”

Fair enough. However, I’ve been thinking that this might be an oversight on the part of the W3C, and the cite attribute should be allowed to contain arbitrary text. For example:

  <h1>Ask Dr. Science!</h1>

  <p>Q: Dr. Science, why is the sky blue? -- Ashley, age 8</p>

  <p>A: Glad you asked, Ashley!  The answer is simple, really:</p>

  <blockquote
    cite="Jackson, J.D. 1975. Classical Electrodynamics, 2nd. ed. 
          New York: John Wiley and Sons">
  <p>
    The scattering of light by gases, first treated quantitatively by Lord
    Rayleigh in his celebrated work on the sunset and blue sky, can be 
    discussed in the present framework.  Since the magnetic moments 
    of most gas molecules are neglible compared to the electric dipole
    moments, the scattering is purely electric dipole in character.  In 
    the previous section we have discussed the angular distribution and
    polarization of the individual scatterings (see Figure 9.6).  We 
    therefore confine our attention to the total scattering cross section
    and the attenuation of the incident beam.  The treatment is in two 
    parts...
  </p>
  </blockquote>

The cite attribute provides an elegant way to scope sections of a document as belonging somewhere else, so why limit it only to stuff on the web? As for the <cite> element, it would still be good for explicitly marking up citations (such as the ones found at the end of a journal article). Well, just a thought.

New LinkType Options

The rel attribute, once the sole province of the <link> element and <a> element, is now universal. The allowed values are defined by the LinkType data type. There are three new options:

• parent: You may now specify a link as a parent document. Strangely, you can’t specify your children or siblings. After all, it’s kinda hard to construct a full tree without information about the children. Oh heck, let’s just say it: won’t somebody think of the children?

• meta: The link “provides metadata, for instance in RDF, about the current document.” This allows you to place your metadata directly in the body content of your document. Not sure why you would want to do this as opposed to using the good old fashioned <meta> tag, but ours is not to question why.

  Speaking of <meta> element, the spec states that “A common use for meta is to specify keywords that a search engine may use to improve the quality of search results. When several meta elements provide language-dependent information about a document, search engines may filter on the xml:lang attribute to display search results using the language preferences of the user.” The idea that people will provide accurate keywords in the first place, let alone scope these keywords appropriately according to language, seems a quaint notion at best.

• p3pv1: When I first read this, the first thought that popped into my head was, “What’s the ‘v1’ doing in there?” The second thought that popped into my head was, “What’s the p3p doing in there?” I have no idea why we would want to reference a particular technology here, let alone a particular version of a particular technology. The W3C should rename this one to “privacy” post-haste.

Note: Part II is now available.