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

質問

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?

役に立ちましたか?

解決

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>

他のヒント

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

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top