Search code examples
htmlsemantics

Semantics: Is a table or a list better for a "list" of details


I'm thinking, for a list like that:

  • OS iOS
  • Version 5.1
  • Size 12.5MB

(There shouldn't actually be a dot or any other list style in front of it, it just to make it more readable.)

Is it better to use a list (like this for example):

<ul>
    <li>
        <h3>OS</h3>
        <p>iOS</p>
    </li>
</ul>

Or a table:

<table>
    <tbody>
        <tr>
            <th>OS</th>
            <td>iOS</td>
        </tr>
    </tbody>
</table>

Or is even a definition list (dl) the most accurate?

Personally I would go with a list, but I'm not sure how to wrap the content semantically correct within the <li>-tags.

I've read an interesting article about it "DEFINITION LISTS VERSUS TABLES", but I'm still not sure.


Solution

  • As of HTML5, a dl would definitely be the most semantically appropriate: http://html5doctor.com/the-dl-element/.

    Unless you're planning on listing multiple instances of data/rows in a way that would be tabular, a table wouldn't make sense at all.

    I generally prefer lists over tables for reasons like responsive design, but as a rule of thumb unless you're dealing with something that is conceptually a view of a matrix rather than a detail of a single record or otherwise a single set of key/value attributes it would be difficult to justify a table (and no matter what in this case the dl is an exact match for the use).