b++ Definition list for article comments or IM dialogue

HTML5 is the buzzword this season. Leading people in the industry are using appropriate class names for what will hopefully once become fully supported structural elements. Fully supported = fully supported by browsers.

In getting ready for HTML5 instead of element header:

<header>Site Name</header>

you’d write

<div class="header">Site Name</div>

For the inclined readers, here’s the HTML5 working draft. Quick overview of the element list will help you catch the train.

Definition lists, rediscovered

Definition list is a personal favorite HTML pattern for marking-up 2 or more related content elements. I found it especially useful when nested in list-items on search results pages and various tag/category listings. This raised a lots of controversy in the past and is still raising today, but I won’t go down that route now. Here’s just a quick example, just in case you don’t have a clue what I’m talking about:

<ul>
    <li><dl>
        <dt>Title</dt>
        <dd class="thumbnail"><img src="image.jpg" alt="" /></dd>
        <dd class="abstract">Lorem ipsum dolor sit amet...</dd>
    </dl></li>
</ul>

The all new rediscovered use of definition lists is with comments or dialogs, for instance Twitter conversation. It has always been it’s intended for this, but now with the dawn of HTML5 (or launch-break for many) it regains the popularity.

HTML4 specs say:

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

And here it is:

<dl class="dialog">
    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>Oh, it looks beautiful with shortcuts.</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>What? But we have full sentences over there!</dd>  

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>Huh?... but it breaks my grid?!
        F*ckin user generated content.</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>Another solution is: we don’t let users post anything.</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>No, we can’t do that neither.
        How about we ask
            <a href="http://twitter.com/programmer">@programmer</a>
            to shorten strings?</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>Clever idea! Go ask him!</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>I came with the idea, <em>you</em> ask him!</dd>

    <dt>
        <a href="http://twitter.com/projectmanager">
            <img src="projectmanager.jpg" alt="" /> @projectmanager
        </a>
    </dt>
    <dd>On second thought, I’ll tell
        <a href="http://twitter.com/cssdeveloper">@cssdeveloper</a>
        to think of something.</dd>

    <dt>
        <a href="http://twitter.com/designer">
            <img src="designer.jpg" alt="" /> @designer
        </a>
    </dt>
    <dd>See? Problem solved!</dd>
</dl>

Is this making any sense? Or should we just stick with ordered/unordered lists and cite + blockquote pairs?

Date: 2009.06.05.08.00
in coding/design, tips.

Prev: How do you start your own web design workshops
Next: WordPress related articles by tags and/or categories