HTML5的"进度"或"计量表"的良好用法？

Question

假设您有10页的调查(每页一个问题).在每个页面的顶部,您包含文本"问题2 of 10".这种事情是" 进步 "还是" 计量 "的好选择？

从语义上讲,"进步"最初似乎是最合适的.但是,我阅读和查看的例子越多,我认为"米"可能更合适.

<meter max="10" value="1">Question 1 of 10</meter>
<progress max="10" value="1">Question 1 of 10</progress>

Answer 1

根据最新的HTML5工作草案,progress标签最适合用于显示手头特定任务的进度.meter最适用于与任务无关的工具,例如磁盘空间或内存使用情况.

该progress元素表示任务的完成进度.

而

该meter元素表示一个已知的范围,或者一个分数值内的标量测量; 例如,磁盘使用,查询结果的相关性,或选择特定候选者的投票人口的分数.

编辑 - 由于渲染和样式似乎是一个问题,您可能会有更多运气使用其他标签.例如,性感的进度导航器可以用以下代码编码:

<nav class="progress">
    <ol>
        <li class="active">Your Info</li>
        <li>General</li>
        <li>Detailed</li>
        <li>Last Step</li>
    </ol>
</nav>

并与风格的东西像这样.

Answer 2

从语义上讲，progress在这里使用似乎是正确的。我也向HTML5 Doctor提出了这个问题，他们似乎也同意这一点。我的问题是目前 (7/5/11) 的全面progress 支持很差。这使得它很难在今天的实际用例中使用。

作为一个止损，我计划使用将新元素名称用作标准 div 元素（AKA - 语义类名称）中的类名称的约定。有关此想法的更多详细信息：http : //jontangerine.com/log/2008/03/preparing-for-html5-with-semantic-class-names

这就是我今天的代码的样子。再过一两年，当这个元素有更好的支持时，我会回去用真正的progress标签替换它。

<div class="progress" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="10">
    Question 1 of 10
</div>