I need to write the markup for this design

alt text

I am thinking to use definition list.

How would you code it?

5 answers

This was chosen as the best answer

I'd go with a UL... it's a list of items or topics... maybe something like

<ul class="items">
        <div class="item"><!-- float this right -->
            <a class="title" href="#" title="foo">Lorem ipsum dolor sit</a>
            <span class="author">Seymour Butts</span>
         <div class="info"><!-- float this left -->
              <a class="comments" href="#">XX Comments</a>
     ... and so on ...
Answered over 8 years ago by Dwayne Anderson
  • My test of sematic value is to examine the page without CSS. your list is not as structured as a table. There's nothing wrong with using tables when it's tabular content - column date, column article title - that's how I'm seeing the design. :) Tony Crockford over 8 years ago
  • 1) There are no column headings. I steer away from a table unless there is a need for <th> elements. 2) With regards to semantics, if the comment count and dates were presented below the item title, there would only be one column, yet there would be no change in the relationship between the items that are currently adjacent. Would you still prescribe a table? I argue that, in this example, the only thing that classifies the data as tabular is the presentation being 2 columns. 3) Using a <ul> or series of <div>s is more flexible. If the designer or product manager comes back and says to stack the information, only a CSS change is required. Using a tables, a change in markup would also be necessary. I point to Digg and Reddit as two sites with high traffic that present a similar type of data in a similar layout using <ul> and <div> respectively. Dwayne Anderson over 8 years ago
  • After lots of thought I've decided to structure it with lists cause the design is likely to change. chchrist over 8 years ago
  • This one's the way to go. Jon Thomas over 8 years ago

If it's tabular data, you can use a table.

A definition list with floated elements has problems in IE when the content isn't equal, the DT and DD get out of step.

Use a table.

Answered over 8 years ago by Tony Crockford

This is a list of items. There are no tabular data here. No correlation between headers and cells and rows. The date is just extra info about the primary list content: the title of the article.

I would thus mark it up somthing like so:

        <p class="meta">
            <strong>14 posts</strong>
            Wed Sep 02
            2009 11:41 am
        <h3><a href="#">Facing the oil challenges</a></h3>
        <p>Author name</p>
    <!-- Item # 2 etc -->

You could make it an ordered list if it's ordered date descending. There's also room to add a little more semantic goodness with classes (i.e.class="date").

If you need to make the strong-element display as a block level element you could make the p.meta a div instead to allow block lvl elements according to the standards.

Answered over 8 years ago by Jens Hedqvist

It depends what the context is. i.e. the rest of the page. If this is the main content of the page, with the only other heading being h1, then it may be worth considering the tites i.e "Facing the oil changes" as h2's, semantically speaking. Two possible options came to mind at first glance:

<dt><a href="#">Facing the oil changes</a></dt>
            <dt>Author name:</dt>
            <dd>Joey Nine-Twos</dd>
            <dt>Number of posts:</dt>
            <dd>14 posts</dd>
            <dt>Date created:</dt>
            <dd>14 posts</dd>

And then the tabular approach which I agree is ok, and especially if you are getting into any trouble with the positioning, it does make things easier (for some). Obviously, the mark up above would need...

dl dd dl dt {
    position: absolute;
    left: -9999px;

The reason for having this extra explanatory markup is for accessibility.

Answered over 8 years ago by nine_toes
  • I could get behind this approach. Dwayne Anderson over 8 years ago
  • A nice solution. Considering the HTML specifications are rather vague on the DL-list you could use it this way. I just always get a dirty feeling when using the DL in a way that's not obviously in the specs. But that's just my standard-paranoid brain talking.. :) Jens Hedqvist over 8 years ago

I agree with Tony. A table would be best.

Answered over 8 years ago by tahdhaze09
  • Why would one mark this answer down? The rest of the layout would be semantically correct, with the exception of the tabular data. The question is how would you markup the particular part of the page, not the whole page. Semantically correct markup would make the above a table. tahdhaze09 over 8 years ago
  • I agree with you. Don't feel bad. This place is like a lot of forums where there are too many people who read something online somewhere and not treat it as gospel and don't think for themselves. Rob over 8 years ago
  • I would go with a table if you could explain to me why. But now all I see is a list of items with a bunch of unstructred data in them. Comments and date mixed up in some kind o meta mashup to the left. And a title and a author name to the right. How would you associate the columns or rows you se with table headers? What would the headers be? Because a table without table headers is hardly a table. I know it's possible to create and style, but the point is that the content is fairly unstructred and sometimes nonassociative. Jens Hedqvist over 8 years ago
  • I looked at the image and saw a visual representation of a table. The data in it is pure space filler, so nobody really knows if it's meaningful, but the fact that it needs to be displayed as a table suggests that in the mind of the designer it is tabular data. I get the distinction, it's just a worry when front end developers avoid tables at all costs and massage other constructs to produce a table! i did say "if it's tabular data" Tony Crockford over 8 years ago
  • I don't have anything against using tables for tabular data, but I just don't see this example as such. Dwayne Anderson over 8 years ago
  • it didn't look much like a list to me, either Only the original designer knows what the data will be and it's probably his judgement that matters. I think it wasn't terribly well represented by the table style image. :) Tony Crockford over 8 years ago
  • I totally agree Tony. Tables are wonderful. And should be used as per specification. Sometimes it isn't that clear exactly what tabular data is and if the content could be specified as such. Jens Hedqvist over 8 years ago
  • Use tables when it's a table, but I think Tony's comment above is key "I looked at the image and saw a visual representation of a table". The visual layout is table-like but we have no reason to believe the contents will be. Perhaps the proper first answer should have been "is the data in the example representative of the project's real data?" I am guessing that the answer was marked down because "I agree" adds nothing substantive to the issue but since I didn't mark it down I don't know for sure. Jim Sewell over 8 years ago