Viridium.ro

Now then, we who’ve written a web page of two and are standards compliant or rather, standards crazy, know a thing or two about the separation between presentation and content. Basically, in case you’re one of the others, who don’t know—so what’s it like on the moon, really?—the (X)HTML document retains the information, the data, the stuff with the meaning, and the Cascading StyleSheet produces directives, rules for the presentation of the content on screen.

They say of the (X)HTML document that it is semantic, it presents the data and its structure exclusively. Now we also all know that the inherent limitations of CSS sometimes force us to introduce additional markup in the document to accommodate CSS rules. Sometimes in the form of a “content wrapper”, other times to support some IE hack, these come to bite at our purist view of the Semantic XHTML document. But, we strive to keep these to a minimum and life goes on, birds chirping—where’s my shotgun?—etcetera, etcetera.

Which leads me to the issue being presented in this article. While we’ve grown to accept the extra markup as a necessary evil, there are other, more subtle ways in which to trump the semantic-ness—may I be excused for the gross manipulation of the rules of grammar—ways that’ll sneak upon you at your first sign of carelessness. But let us exemplify.

Say you intend to describe the outline of a PowerPoint document template. The document template is made of slide templates, of a limited number of predefined types. You may have title slides, subtitle slides, then slides containing predefined graphs, static text slides, and the list goes on. You’ll come up with markup akin to:

<div id="slides">
  <div class="slide">Title Slide</div>
  <div class="slide">Subtitle Slide</div>
  <div class="slide">Bar Chart Slide</div>
  <div class="slide">Scatter Chart Slide</div>
  ...
</div>


All is well in Wonderland, markups are beautiful, children are safe, old ladies on the side of the street can once again enjoy the chirping birds. But now your boss comes—I know, why is the boss always the bad guy?—and wants the title slides to be colored differently. You update your semantic XHTML to include the type of the slide as class name, for title slides. But there are 50 different other types of slides, so you decide only the title and subtitle slides deserve the added class name:

<div id="slides">
  <div class="slide title">Title Slide</div>
  <div class="slide subtitle">Subtitle Slide</div>
  <div class="slide">Bar Chart Slide</div>
  <div class="slide">Scatter Chart Slide</div>
  ...
</div>


Wrong! All title slides types must be listed. In the current form, the markup makes visible certain presentation decisions that were made along the way—that title and subtitle slides have some specific presentational features. From a semantic standpoint, the document states that the two slide types, title and subtitle, have some special meaning that others don’t. This is not something that should be stated, as my example never attached special semantics to these slide types. They are not any more special than a bar chart or a static text slide. Even when classifying slides as title, subtitle and standard, one should still mark the remaining slides as standard. Therefore, here’s what you want to get. (I reordered the classes so as to make the document more readable.)

<div id="slides">
  <div class="title slide">Title Slide</div>
  <div class="subtitle slide">Subtitle Slide</div>
  <div class="bar-chart slide">Bar Chart Slide</div>
  <div class="scatter-chart slide">Scatter Chart Slide</div>
  ...
</div>


Man, I’m so smart!