Semantic HTML tags for numbered progress bar

Question

What would the most relevant HTML tags be for a numbered progress bar such as:

(1) Step 1: do something (2) Step 2: do something else (3) Step 3: complete

I considered using an <ol> but in this case, the '1', '2', '3', will need styling.

Also to indicate which step the user is currently on.

Answer 1

正如您已经决定的那样，有序列表是显示进度条的最具语义的方式。不幸的是，没有特定的HTML元素或属性用于＆＃34;当前步骤＆＃34;或类似的东西（我希望我知道为什么！）。所以你需要自己做点什么。我之前使用过的最简单的方法是使用带有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也很有用;）