1。你对如何改进这个有什么建议吗？

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

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

这假设列表中的项目可以表示为＆＃34; 独立的内容项＆＃34; （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。

此元素旨在用于以机器可读格式显示日期和时间。这有助于用户代理为用户的日历提供任何事件安排。

阅读Bruce Lawson's post on the time tag以查看此datetime符号是否有效。

现在，“模糊日期”是可能的： <time datetime="1905">表示1905年

2。是否有更多理由不应该这样做？

使用<li value="year">时，您将该号码的含义视为一年。

其他想法

@Michael_B's answer让我更深入地了解了<ol>和<ul>以及@tibzon gave an example与有序列表的reversed属性的含义，请参阅{ {3}}

Answer 2

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

如果您使用后端语言生成内容，则可以使用后端语言执行排序算法并在前面打印您想要的任何数字。既然你不希望数字以1开头，我建议你改用。

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

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

我不确定你的排序算法所以无法帮助解决这个问题。希望这有帮助。

Answer 3

如果要在HTML中创建有序列表并指定1以外的起始编号，则可以使用start标记中的ol属性。

<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有序列表＆lt; ol＆gt;

的功能

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

以下是关于有序列表的HTML5 spec所说的内容：

ol元素表示项目列表，其中项目已 故意订购，以便更改订单会改变 文件的含义。

以下是MDN的说法：

<ol>和<ul>都代表了一个项目列表。它们在中有所不同 方式，使用<ol>元素，订单是有意义的。作为的规则 拇指确定要使用哪一个，尝试更改的顺序 列表项;如果含义发生变化，<ol>元素应为 使用，否则<ul>就足够了。

以下是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

是否有更好的方法在有序列表中使用年份而不是值属性？

3 个答案:

1。你对如何改进这个有什么建议吗？

备选方案A

备选方案B

2。是否有更多理由不应该这样做？

其他想法

HTML有序列表＆lt; ol＆gt;