编号进度条的语义HTML标签

Question

对于编号的进度条，最相关的HTML标签是什么：

（1）步骤1：做某事（2）步骤2：做其他事（3）步骤3：完成

我考虑过使用<ol>但是在这种情况下，'1'，'2'，'3'需要样式。

还可以指示用户当前正在执行的步骤。

Answer 1

正如您已经决定的那样，有序列表是显示进度条的最语义的方式。 不幸的是，没有用于“当前步骤”或类似内容的特定HTML元素或属性（我希望我知道原因！）。 因此，您需要自己做一些事情。 我以前最简单的方法是使用带有alt属性的步骤编号图像，例如

<li><img src='step1.png' alt='Step 1: Current step'>Do something</li>

但是您可以改用视觉隐藏的文本。 图像在视觉上必须与其他步骤区分开，以便色盲用户也能得到通知。

Answer 2

当前可能没有什么比这更有意义的语义了：

<ol>
 <li class='currentStep'>
  <span>1</span> 
  <span>do something</span>
 </li>
 <li>
  <span>2</span>
  <span>do something else</span>
 </li>
</ol>

Answer 3

在语义上，我同意使用ol但是我相信您可以通过使用一点CSS和使用data-attributes来达到预期的效果

标记看起来像这样

<ul>
 <li data-step="1">Do something</li>
</ul>

以下是实施示例： http : //jsbin.com/gifisireku/edit?html,css,output

使用它的好处是您可以拥有干净且易于访问的标记，这对于SEO也是很好的；）