What would Tantek do?

16th February, 2006 @ 1:17pm UTC

Development, Web Standards, XHTML / 4 Comments

A common problem, faced every day by web developers, is that of semantic markup. Having gone through the table-based disregard for HTML that was the mid 90s, we’ve come out the other side with stronger resolve. We now have the tools to seperate design from content (see Malarkey’s Web Standards Trifle); allowing us to concentrate on marking up the content with more meaning. This has, in turn, resulted in most of us going back to school to re-learn HTML so we can improve our understanding of the tags available to us.

To this end, Stuart and I regularly have discussions relating to the “best” methods of semantically marking up particular types of data. This, inevitably, degrades into idea-tennis™ and a mammoth, googled research session (to see what everybody else does). Ultimately, we ask that most familiar of developer’s questions: What would Tantek do?

Currently our discussions have been about two things; dates and comment rolls. So what are the best ways of marking these two items up?

Dates are a genuine nightmare (multiformats aside). As a developer, I want it to be obvious that the data I have marked up is a date; but there’s no tag available to do this. This is probably the only data type I can think of (without the prompting of the inevitable comments to follow) where this is the case.

Comment rolls, on the other hand, are a different kettle of fish. Obviously a comment roll should be some form of list; and 9 times out of 10 I prefer an ordered list (<ol>—it’s nice to know the order of the comments). However, how do I mark up the content of each list item? I’m inevitably going to want to include the comment text, but I also want to include a citation; and the date and time it was posted. Looking around the web it’s clear that a lot of developers (including Doug Bowman, Faruk AteÅŸ and Stuart) feel this is the perfect place for a definition list (<dl>)—citation and date as the definition term and comment text as the definition description. This makes sense to me but doesn’t allow the ordered nature of the <ol> (we’re talking sans-stylesheet here). The best way to get the best of both worlds (in my humble opinion) is to nest the <dl> within the <ol>. This results in something like the following:

<ol>
  <li>
    <dl>
      <dt>
        <cite>Stuart</cite>
        January 18, 2006 @ 9:53 pm
      </dt>
      <dd>
        <p>That would make a great T-shirt!</p>
      </dd>
    </dl>
  </li>
</ol>

In summary, I guess problems like this are always going to be open to interpretation. So let me finish this post with two simple questions: Has this sort of thing ever happened to you, and what did you do to solve it?

Answers on a comment roll to…

Like this post?

Tweet it or Del.icio.us it!

Pinboard

Advertising

Comments (4)

Skip to the comment form…

  1. Gravatar Image Andrew February 27, 2006 @ 11:54 am

    Is this a case for the use of XML/XSL/XSLT? Define your own markup schema and styles then you’re not restricted to the options available in (X)HTML.

    Thus, you could have

    <comments>
      <comment>
        <author>Stuart</author>
        <date>January 18, 2006 @ 9:53 pm</date>
        <p>That would make a great T-shirt!</p>
      </comment>
    </comments>

    I’m no expert here, but it’s just an idea that came to me.

  2. Gravatar Image Matthew Pennell March 10, 2006 @ 12:24 pm

    I’d always laboured under the misunderstanding that you couldn’t nest block level elements inside a LI – doh!

  3. Gravatar Image Mike March 14, 2006 @ 2:52 pm

    It’s a good method and semantically, ticks all the boxes, but it just looks like too much code to me.

    Not that I’d have an alternative though …

  4. Gravatar Image Lawrence October 27, 2006 @ 6:33 pm

    Where there’s a will, there’s a way. Lawrence.

Leave a comment





Categories

Syndication

Technorati

© 2012 Tim Huegdon, All Rights Reserved / Website design and development by Nefarious Designs

Powered by Wordpress / Log in

Due to the dodgy manufacturing process, this website may contain traces of nuts!