Search code examples
htmlsemantic-markupweb-standards

With web standards and semantics in mind, when coding a list of events, should I use an ordered or unordered list?

If I have a list of events taking place in a given month like:

October Events:

Oct. 8 - Community Dance Oct. 9 - Karaoke Night Oct. 10 - Pot-luck

What is the best way to code this out–using a UL, OL or something else?

Unordered List

<h3>October Events</h3>

<ul>
   <li>Oct. 8 - Community Dance</li>
   <li>Oct. 9 - Karaoke Night</li>
   <li>Oct. 10 - Potluck</li>
</ul>

Ordered List

<h3>October Events</h3>

<ol>
   <li>Oct. 8 - Community Dance</li>
   <li>Oct. 9 - Karaoke Night</li>
   <li>Oct. 10 - Potluck</li>
</ol>

If I were to include a description, would that change the way you'd look at it? With a description I'd probably go this way:

<h3>October Events</h3>

<article>
   <h4>Community Dance</h4>
   <p class="date">Oct. 8</p>
   <p>Description</p>
</article>

<article>
   <h4>Karaoke Night</h4>
   <p class="date">Oct. 9</p>
   <p>Description</p>
</article>

<article>
   <h4>Potluck</h4>
   <p class="date">Oct. 10</p>
   <p>Description</p>
</article>

So, with web standards in mind, what is the most semantic way to code out a list of events?

Solution

  • Based on W3C Wiki ( http://www.w3.org/wiki/HTML_lists ) :

    When trying to decide what type of list to use, you can usually decide by asking two simple questions:

    1. Am I defining terms or associating other name/value pairs?
      • If yes, use a description list.
      • If no, don’t use a description list — go on to the next question.
    2. Is the order of the list items important?
      • If yes, use an ordered list.
      • If no, use an unordered list.

    And here Your should use:

    <dl>
  <dt>Oct. 8</dt>
  <dd>Community Dance</dd>
  <dt>Oct. 9</dt>
  <dd>Karaoke Night</dd>
  <dt>Oct. 10</dt>
  <dd>Potluck</dd>
</dl>