XHTML + CSS Review

Standards Compliance & Semantically Correct XHTML

Standards Compliance

Standards compliance essentially means that everything in your Web page, every XHTML element and tag, is used for what it's supposed to be used for.

Exhibit A: The Misuse of HTML Tables

This issue is best illustrated by the previously ubiquitous table element:

  1. The HTML table element was created to display tabular data, that is, information best organized in rows and columns.
  2. By the end of the 90s, the HTML table element had become a Web designer's best friend. This was technically a misuse of the table's original purpose, but at the time it was the only way to control the layout of images and text on a page.
  3. By the early 00's CSS had been sufficiently adopted by major Web browsers to render the table element's misuse nearly unnecessary.
  4. Today, we no longer need to misuse tables for layout or design.

In some circles, this is still somewhat of a contraversial issue. But I've found that the people who argue for the continued misuse of tables usually just don't want to learn to use CSS properly. Why? Because CSS is not as easy to learn. It's faster in the end, but initially takes some work to figure out.

I will admit, however, there is one valid argument for the continued use of tables, though it is becoming weaker by the day:

Old browsers still don't support CSS, or support it improperly.

I think this is a valid argument, but it is weak because:

Then there's this argument:

CSS can't do what tables can do.

»!GONG!« There are a ton of established best practices for positioning elements in a standards-compliant way using semantically correct XHTML and just CSS. I challenge you to present me with something CSS can't do that tables can do (I actually know of 2 already, but they are, I think, negligble). Worst-case scenario you can actually replicate a table's behavior using CSS on correctly-used XHTML elements.

Disclaimer: I am quite vocal about the misuse of tables, partly because I understand they are no longer essential, partly because I believe in Web standards, and partly because I worked as a Web developer for an educational organization for a number of years concerned primarily with special eduation. This environment taught me to take accessibility very seriously, and I learned that one can write accessible, standards-compliant code with little extra effort, if one is educated on the specifics.

Exhibit B: The Underuse of XHTML Lists

Here's another prominent standards-compliance issue:

  1. The HTML list element was created to enclose any sort of list data
  2. Browser's render HTML lists fairly consistently: vertically with bullets or ordinals (numbers/letters)
  3. CSS allows us to transform the look of lists from vertical to horizontal, from bullets or ordinals to borders, backgrounds, colors, etc.

In XHTML the list still properly describes and defines the content of a list, but CSS displays it however you want.

Here's a good example. How many XHTML lists can you spot in this Web site mock-up?

Did you count only 1? Well, if XHTML is used properly there are at least 3, arguably 4 XHTML lists in this page:

I say arguably 4, because the 4th list could either be a dl (definition list) or a table. If we are going to be standards-compliant and write semantically correct XHTML, all the others clearly should be unordered or ordered lists (depending on how the client and information designer view the hierarchy of the items).