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

StackOverflow https://stackoverflow.com/questions/12786373

Domanda

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?

È stato utile?

Soluzione

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>

Altri suggerimenti

This depends on your definition of “web standards” and “semantics”. In the old sense, “semantics” refers to meanings, and this question is really about structure. Using ol, ul, dl, table, div or something else does not really say much about meaning.

The pragmatic question is: How would you like to have the data displayed when your all CSS settings get ignored. This seems to call for a table, which is also the most adequate markup for the structure (dates in one column, names of events in another), and it is also extensible (you can add new columns if needed, e.g. a column for the place of the event).

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top