有没有比 value 属性更好的方法在有序列表中使用年份？

Question

对于所有都有年份的投资组合项目列表，我假设有序列表是语义上的方式，因为它是按年份排序的列表。但是，我不希望值是从 1 开始的数字，而是项目创建的年份。为了达到这个结果，我写了以下内容。

<ol>
  <li value="2015">Last made item</li>
  <li value="2015">Item before that</li>
  <li value="2014">Earliest item</li>
</ol>

然而，这

反转 <ol> 的自然顺序；
多次使用同一个标记；

所以我认为这并不是完成此任务的最佳方法。所以我想知道：

你对如何改进这个有什么建议吗？
还有什么理由不应该这样做？

编辑： 请注意列表已经排序，但我希望标记为创建项目的年份。使用前面提到的方法会发生这种情况（也请参见 this Fiddle），但我怀疑这是语义上最好的方法。

Answer 1

标签不会为您做任何排序算法。 HTML 是一种标记语言，仅用于显示目的。仅用于订单列表，您必须自己订购。

如果你的内容是使用后端语言生成的，那么你可以使用后端语言进行排序算法并在前面打印你想要的任何数字。由于您不希望数字以 1 开头，因此我建议您改为使用。

例如，如果您使用 PHP 作为后端语言，则可以使用以下代码：

echo "<li>".$year." - $content."</li>";

我不确定您的排序算法，因此无能为力。希望对您有所帮助。

Answer 2

如果要在HTML中创建一个有序列表并指定一个非1的起始数字，您可以在ol标签中使用start属性。

<ol start="2014">
  <li>Last made item</li>
  <li>Item before that</li>
  <li>Earliest item</li>
</ol>

这里是DEMO.

更新

根据您修改后的问题和新评论，我发现您主要关注代码的语义。具体来说，这段代码是...

<ol>
  <li value="2015">Last made item</li>
  <li value="2015">Item before that</li>
  <li value="2014">Earliest item</li>
</ol>

...语义正确？

答案是肯定的。在语义上，你完全没问题。

HTML 有序列表的特征

有序列表（ol）只是意味着列表的顺序很重要，而在无序列表（ul）中，每个列表项的顺序并不重要，每个列表项都可以随机排序，因为顺序无关紧要。

HTML5 spec 对有序列表的描述如下：

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

MDN 是这样说的：

The <ol> and <ul> both represent a list of items. They differ in the way that, with the <ol> element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, else the <ul> is adequate.

HTML5 规范没有说：

并不是说每个行项目的数字或字母必须是数字或字母。他们没有。
并不是说标记每个行项目的数字或字母必须按时间顺序排列。他们没有。
甚至没有说每个行项目必须有一个数字、字母或其他标记。它没有。它可以留空（参见 CSS list-style-type: none）。

这些列表的顺序有意义的例子是有效的并且在语义上是正确的HTML。

<ol>
  <li value="2025">Portfolio 1</li>
  <li value="2010">Portfolio 2</li>
  <li value="1999">Portfolio 3</li>
  <li value="2005">Portfolio 4</li>
  <li value="2015">Portfolio 5</li>
  <li value="2014">Portfolio 6</li>
</ol>

<ol type="a" reversed>
  <li>Portfolio 1</li>
  <li>Portfolio 2</li>
  <li>Portfolio 3</li>
  <li>Portfolio 4</li>
  <li>Portfolio 5</li>
  <li>Portfolio 6</li>
</ol>

<ol style="list-style-type: none;">
  <li>Portfolio 1</li>
  <li>Portfolio 2</li>
  <li>Portfolio 3</li>
  <li>Portfolio 4</li>
  <li>Portfolio 5</li>
  <li>Portfolio 6</li>
</ol>

Run examples in Fiddle

Answer 3

1。您对如何改进这一点有什么建议吗？

备选方案 A

一个好的替代方案是这样的结构：

<article>
  <time datetime="2015">2015</time>
  <h1>Last made item</h1>
  <p>Description</p>
</article>
<article>
  <time datetime="2015">2015</time>
  <h1>Item before that</h1>
  <p>Description</p>
</article>
<!-- etc. -->

这假设列表中的项目可以表示为“独立的内容项目”（W3C specification）和投资组合项目，这是类型我问题中的项目符合此规范。

选项 B

<ol>
  <li>
    <time datetime="2015">2015</time> Last made item
  </li>
  <li>
    <time datetime="2015">2015</time> Item before that
  </li>
  <!-- etc. -->
</ol>

使用 CSS 如果需要，您可以删除标记。感谢 TotempaaltJ 提供此替代方案。

无论哪种方式，年份现在都是机器可读的时间，请参阅 MDN。

This element is intended to be used presenting dates and times in a machine readable format. This can be helpful for user agents to offer any event scheduling for user's calendar.

阅读 Bruce Lawson's post on the time tag 以查看此 datetime 表示法 works/is 允许。

Now, “fuzzy dates” are possible: <time datetime="1905"> means the year 1905

2。是否还有其他原因不应该这样做？

当使用 <li value="year"> 时，你失去了数字作为一年的意义。

其他想法

gave me more insight into the meaning of <ol> and <ul> and @tibzon with the reversed attribute of an ordered list, see his fiddle.

有没有比 value 属性更好的方法在有序列表中使用年份？

Is there a better approach to use years in an ordered list than the value attribute?

html

html-lists

semantics