When is a list not a list?

Tweet

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.warpspire.com Brak

    If you’ll note, in the ALA article the lists go from (left down, right down): 1, 2, 3, 4 – whereas your linked technique goes: 1, 3, 2, 4. I believe that’s the true reason for splitting it up.

    You have to consider people read down, left to right when viewing lists. Making a viewer scroll left and right to read multiple list items is silly.

    I think some people take semantics a bit too far. Just because something doesn’t fit perfectly, doesn’t mean we should abandon lists completely and adopt tables. There are severe limitations when using tables later (can I say redesign?).

    A list is a list when it’s a list of items. That’s it.

  • http://www.johandahlstrom.se Johan Dahlstr

    On the contrary, two lists are two lists when they’re two lists of items, and not one list when it’s two lists of items.

  • http://www.sitepoint.com AlexW

    If you’ll note, in the ALA article the lists go from (left down, right down): 1, 2, 3, 4 – whereas your linked technique goes: 1, 3, 2, 4. I believe that’s the true reason for splitting it up.You have to consider people read down, left to right when viewing lists. Making a viewer scroll left and right to read multiple list items is silly.

    But doesn’t the ‘U’ in ‘UL’ mean Unordered? If the reading order is critical, wouldn’t it make sense to:
    a) use an ordered list; &
    b) not break them into ambiguous columns.

    I think some people take semantics a bit too far. Just because something doesn’t fit perfectly, doesn’t mean we should abandon lists completely and adopt tables.

    The point is, the items do fit perfectly into a classic unordered list. In his real world application the list items are all groups of related services offered by the company. You now have a slightly ludicrous situation where his list of 2 related security services appears as two lists x 1 item each.

    There are severe limitations when using tables later (can I say redesign?).

    Imagine we were using this technique across our article database. At the next redesign we would need to either:
    a) find every article using these split lists and re-markup the items as a single list, or;
    b) write wacky CSS to ‘frankenstein’ any consecutive lists into appearing as a single list.

    Neither of those options really appeals to me.

  • AmyCham

    Why not just set your li’s to “display:block; width: 50%; float: left”? May need some tinkering, but that’s the gist….

  • momos

    maybe for ordered lists we’ll have to wait for multi-column layouts(CSS3)!

  • http://www.splintered.co.uk redux

    sums up my feelings when i first saw the ala article. for heaven’s sake, if people want to abuse markup to achieve a certain visual layout, they may as well use tables and spacer gifs…

  • mrhatch

    At the risk of flying my ignorance from the flagpole, has anyone looked at the page that inspired the design? A link is provided at the bottom of the article.

    Aside from the fact that it uses img tags instead of css for the bullets, it is a visually appealing layout. I have needed this type of layout on several occasions and have never found a CSS/Semantic solution for it.

    I give you the hypothetical:

    1. Company A is a software design company.
    2. Company A has six different divisions which each specialize in a specific area.
    3. The home page should have a descriptive paragraph for the company as a whole.
    4. Each of the six divisions will have a short three sentence paragraph introducing their services with a link to their division home pages.

    In the past I have had to rely on a table based design and hated every minute of it because a reorg will come along and company a will eliminate the ADA programming division and here we go.

    While this solution is not perfect, it is better than what we have been forced to do in the past.

    Regards
    MH

  • bart
  • http://www.sitepoint.com AlexW

    Nice find, Bart. Certainly a more elegant solution.

  • kmsiever

    Unless, of course, you want multiple columns for an ordered list. Then it no longer is “cleaner”.

  • http://www.sitepoint.com AlexW

    How do you come to that conclusion, Kim? The ComMX solution gives you multiple columns for an ordered list. The only issue it has is it leaves classes hardcoded into the HTML that imply a structure that is only present in this layout. But at least they only become visible if they are called.