Styling news and events...

**Tom_M** · 04-06-2007, 02:44 PM

What is the best way to markup and style news and events listings? I am currently using a definition list for the layout. I'm not sure if there is a better way or not. Here is how I have my events listed:

Code:

<dl>
    <dt>Relay For Life<br />
    <span class="date">June 8 - 9</span></dt>
    <dd>Relay For Life® is a fun-filled overnight event designed...</dd>
</dl>

Is a definition list OK to use. Or is there a better way?

**willcode4beer** · 04-06-2007, 03:03 PM

A definition list is fine but, ditch the span and break tags. Something more along the lines of:

HTML Code:

<dl>
    <dt>Relay For Life</dt>
    <dd class="date">June 8 - 9</dd>
    <dd>Relay For Life® is a fun-filled overnight event designed...</dd>
</dl>

**Tom_M** · 04-06-2007, 09:15 PM

I was unaware that a definition list could have more than one definition per term?

**willcode4beer** · 04-07-2007, 01:47 PM

Can have many of each
http://www.w3.org/TR/html401/struct/lists.html

Here's one of the coolest uses for a definition list I've seen:
http://alistapart.com/articles/cssmaps

**WebSavvy** · 04-07-2007, 02:17 PM

Yes, definition lists can have more than one definition description per list. You can even nest them. My entire directory is coded using definition lists for the layout.

The design and layout is about 2 months old. I'm currently working on another new layout and design, but coded using <div> instead.

The nice thing about definition lists is the fact they're almost like tables but better.

**Tom_M** · 04-07-2007, 02:42 PM

Quote:

Originally Posted by willcode4beer

Here's one of the coolest uses for a definition list I've seen:
http://alistapart.com/articles/cssmaps

Thanks for the tips. And yes that is a pretty cool use for a DL. I think I might even try one of those image maps. Very nice!

I am learning lists are more and more versatile than I thought.