HTML & CSS - - By Alex Walker

When is a list not a list?

I think web page semantics are a relatively flat discussion topic.

What can you say? If you believe that giving your pages meaningful structure is valuable, you do just it. Markup is something you do to inject more information into a document. There’s a little room for argument on whether ‘subheader B’ is an h3 or an h4, but, in general, there are limited ways of marking up a given page sensibly.

On the other hand, if you don’t put too much stock in semantics, all bets are off. Tags are simply a loose bucket of ‘browser lego’. The sizes may differ a little, but in essense, the red blocks don’t mean anything more than the greens or yellows. You grab the first block that fits nicely into your next gap and stop when you’re happy with the result.

Which is cool. That’s not me, but it’s fine for anyone to choose that approach.

The thing that I’ve found slightly bewildering lately is a mini-trend towards fractured semantics or what you might call ‘semi-antics’.

The latest A List Apart article on two column lists is a case in point.

To achieve this layout (pictured above) the article suggests an approach that involves taking one quite sensible list and splitting it into two less sensible lists. The list items are, in theory, still related to each other, and the only reason for splitting it (the original list) is the fact it helps the browser to present it in a particular fashion.

Extending this idea, you would need three lists if you wanted three columns of lists, four lists for four columns, ..etc.

Now I’m certainly not proposing that we introduce ‘semantics police’ breaking down doors in the night, and I’m also well aware of the ‘bah humbugging’ and ‘tut-tutting’ that goes on every time ALA publishes a slightly left-field technique,… but, I do think, as designer/developers, we need to have a clear idea of what we’re trying to achieve.

If a single meaningful list can be so effortlessly snapped into multiple, meaningless ‘list-lets’, why use a list at all?

When you slice a list in two, it’s nourishing ‘listy‘ goodness instantly ebbs away and there are no longer any compelling reasons not to use a table. Or an image, or even and tags with overriding CSS for that matter. Ultimately they're all equally nondescript Lego pieces, that don't pretend to tell you anything about their job in the document. They have no innate value, other than what they can contribute to the final render as a whole.

The funny thing is, as a number of commenter to the article have said, there seem to be plenty of relatively common sense ways to achieve the same effect without dicing the list.

This seems pretty straight forward to me. Am I missing something?