编号进度条的语义HTML标签

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

As you've already decided, an ordered list is the most semantic way to show a progress bar. Unfortunately there isn't a specific HTML element or attribute for "current step" or anything similar (I wish I knew why!). So you'll need to make something yourself. The simplest way I've used before is to use an image of the step number with an alt attribute, eg

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

But you could use visually-hidden text instead. The image would need to be visually distinct from the other steps so that colour-blind users are informed as well.

Answer 2

Probably nothing more semantic currently than:

<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

Semantically I agree with the use of ol but I believe you can achieve the desired effect with a bit of css and use of data-attributes

The markup would look something like this

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

Here's a sample of the implementation: http://jsbin.com/gifisireku/edit?html,css,output

The benefit of using this is you can have clean and accessible markup which is great for SEO as well ;)