Proper (meaning valid and semantic) Markup and CSS, Please.

Mark · January 2006

I can't wait to see what you guys come up with

Bergamot · January 2006

My AIM screenname is in my profile, and I'll probably be on the boards tomorrow as well.

Jan · January 2006

Hi, all!

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?

Mark · January 2006

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.

timberford · January 2006

from what i understand, for every <dt> you should have a <dd> - they should be in pairs.

Jan · January 2006

from what i understand, for every < dt > you should have a < dd > - they should be in pairs.

Not according to this article:
http://maxdesign.com.au/presentation/definition/

Anyways, this was just a suggestion.

Bergamot · January 2006

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.

<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>

Doesn't that completely do away with the purpose of having a definition list?

nick1presta · January 2006

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.

Bergamot · January 2006

How about

<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:

Post Title 1!

Category:: Category 1

Post Title 2!

Category:: Category 2

nick1presta · January 2006

Sure. Also, to note, it's, <h3><a href="#" title="#"></a></h3> block-level elements surround inline-level elements =P

Bergamot · January 2006

Yes, that's right. Or, we could drop the h3 element altogether.

timberford · January 2006

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.

Jan · January 2006

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.

Bergamot · January 2006

I'm pretty sure definition titles are block level.

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.

Jan · January 2006

I'm pretty sure definition titles and definitions are block level.

They are, but you can't use block-level elements inside a < dt > - it doesn't validate.

Bergamot · January 2006

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?)

timberford · January 2006

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...

Bergamot · January 2006

Well it's pretty useless arguing about what the non-existant header level is

timberford · January 2006

ok what heading would you use for "options", "discussion filters" etc. ? cause i'd usually look at h3 for those.

Bergamot · January 2006

h3 or h4; why?

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.