I originally separated the label from the value (ie. Category / Vanilla) because I was thinking that someone might want to try to style the discussions like a table. So, the first discussion would take the dt and use it as a column heading for the table, and the rest of the discussions would hide the dt and just display the dd.
But whatever. I'm throwing in the towel on xhtml until I see what these guys come up with.
I'm still on the fence with respect to the use of definition lists in layout. I still use them a lot, but something about them just doesn't seem semanticly sound; there's no real link between the title and the definition.
There are lots of forms of definitions - it depends what kind of question.
A question might be, who started the thread? How many new posts? Who made the last comment?
However, if you have a valid, lightweight alternative, I'm very open to hearing it.
Something like,
<h3>Post Title</h3>
<ul>
<li>Category: <a href="#" title="#">Category 1</a></li>
...
</ul>
Could work well too but we would still need a container which is why the definition list is such a great element - you have a header, content and a container all in one.
Second, you can place unordered lists inside the definition description element.
So something like,
<dl>
<dt><h3>Post Title 1!</h3></dt>
<dd>
<ul>
<li>Category: <a href="#" title="#">Category 1</a></li>
...
</ul>
</dd>
<dt><h3>Post Title 2!</h3></dt>
<dd>
<ul>
<li>Category: <a href="#" title="#">Category 2</a></li>
...
</ul>
</dd>
</dl>
Is perfectly valid too and works well in terms of ability to customize (list-style-item/image, positioning, etc).
I much prefer the latter for this specific situation.
i like bergamots last suggestion there.
i think the h3 is good, whether it is an h3/h2 or whatever level heading i guess we have to see where it resides in the markup.
Yes, Bergamot's suggestion is a lot more easier to navigate than the current solution. The <hn> elements in <dt> have to go, though, as they are block-level elements and cannot be used inside a definition term.
timberford: I think it would go
h1 -> Forum Title (Lussumo Community)
h2 -> Category Title (All Discussions)
h3 -> Discussion Title (Main page with only one Catagory?)
yeah i think that makes sense for the headings.
however, the side panel comes before the main discussions content... so in the markup there's likely to be a lower heading level before the h2 for the category title. unless of course we can adjust the css such that the side panel can come after the main content in the markup...
For a page that's been properly structurally marked up, the importance of a header element should be pretty obvious; the numbering scheme is mainly to make styling easier.
Comments
One little question. Instead of setting up the discussion topic list on the discussions page like so:
<dl> <dt>discussion topic</dt> <dd>[Sticky] Vanilla 0.9.3 Beta Released (2005-12-01)</dd> <dt>Category</dt> <dd>Vanilla</dd> <dt>Started by</dt> <dd>mark</dd> <dt>Comments</dt> <dd>71</dd> <dt>Last comment by</dt> <dd>nick1presta</dd> <dt>Last Active</dt> <dd>3 days ago</dd> <dt>new</dt> <dd>5</dd> </dl>...couldn't one do it like this instead:
<dl> <dt>[Sticky] Vanilla 0.9.3 Beta Released (2005-12-01)</dt> <dd>Category: Vanilla</dd> <dd>Started by: mark</dd> <dd>Comments: 71</dd> <dd>Last comment by: nick1presta</dd> <dd>Last Active: 3 days ago</dd> <dd>New: 5</dd> </dl>This way one could even make the discussion topics one big list, like so:
<dl> <dt>[Sticky] Vanilla 0.9.3 Beta Released (2005-12-01)</dt> <dd>Category: Vanilla</dd> <dd>Started by: mark</dd> <dd>Comments: 71</dd> <dd>Last comment by: nick1presta</dd> <dd>Last Active: 3 days ago</dd> <dd>New: 5</dd> <dt>Another topic</dt> <dd>Category: xxx</dd> <dd>Started by: xxx</dd> <dd>Comments: xxx</dd> <dd>Last comment by: xxx</dd> <dd>Last Active: xxx</dd> <dd>New: xxx</dd> [...] </dl>It makes more sense to me, and if page styles are off, it's much easier to navigate. What do you guys think?
But whatever. I'm throwing in the towel on xhtml until I see what these guys come up with.
http://maxdesign.com.au/presentation/definition/
Anyways, this was just a suggestion.
<dl> <dt><a href="#" title="#">Post Title 1!</a></dt> <dd> <dl> <dt>Category:</dt> <dd><a href="#" title="#">Category 1</a></dd> ... </dl> </dd> <dt><a href="#" title="#">Post Title 2!</a></dt> <dd> <dl> <dt>Category:</dt> <dd><a href="#" title="#">Category 2</a></dd> ... </dl> </dd> </dl>That would look pretty much like this unstyled:EDIT: Yep, they're display:list-item but that counts as far as element nesting goes.
RE-EDIT: Maybe it's different in XHTML; lemme check.
RE-RE-EDIT: Jan was right; I was wrong.
So bye bye H3 tags! Like I said before, they really aren't necessary.
For a page that's been properly structurally marked up, the importance of a header element should be pretty obvious; the numbering scheme is mainly to make styling easier.