你能做不代表你该做：`<meter>` 元素

<meter> 的范围与语义

• 许多人认为，当要传达某个已知范围内的值以及阈值（min/max、low/high、optimum）时，<meter> 很有用，例如燃料余量、温度区间、机器仪表、角色属性、投票结果或麦克风音量。
• </progress> 被视为更专门化：表示一个走向完成的任务，有时是不确定的，但总体上是向前推进的。<meter> 则用于可上下波动的任意指标。
• 有几位评论者认为，MDN 的烤箱温度和考试分数示例误用了 <meter>，用含糊的条形图替代了清晰的数字文本。

语义化 HTML vs 功能性

• 一种观点认为，HTML 元素把功能（“它做什么”）和语义（“它是用来做什么的”）绑定在一起，当开发者想要行为但不想要语义时，就容易被误用。
• 有人建议增加一个属性来标记“离标”使用，或者反转默认行为：让原始功能成为默认，语义则需要显式选择开启。
• 也有人强调，语义元素的定义恰恰是由其预期含义决定的，而不是由视觉表现决定的。

无障碍与 ARIA

• <meter> 被描述为主要是一项无障碍特性；如果没有它，开发者只能用样式化图片或 <div> 来近似，而这些对辅助技术来说意义更弱。
• role="meter" 的 ARIA 方案被提出作为替代，它既保留语义，又允许完全自定义样式。
• 也有人提醒，较少使用的语义标签可能会暴露浏览器/屏幕阅读器的 bug 和不一致性。

样式与实现痛点

• 多条评论把 <meter>/<progress> 的样式描述为“噩梦”：非标准、带厂商前缀的伪元素，以及浏览器间行为冲突。
• 不能把 ::before 之类的伪元素应用到替换元素上，被批评为阻碍了简单增强（例如通过 CSS 显示数值）。

UI 设计中的仪表与数字显示

• 很长的分支讨论了模拟仪表与数字读数的取舍（汽车、油量、转速表、磁盘、CPU/RAM）：
  • 支持仪表：能快速外围扫视，阈值清晰（绿色/红色区域），有变化率的感觉，适合“这是否正常？”的检查。
  • 支持数字：更精确，可直接与数值限制比较（例如限速），某些人解析更快，尤其是更习惯数字而不是模拟刻度的人。
  • 许多人主张同时显示两者（仪表 + 数字）并支持用户自定义；也有人指出神经多样性，并不是所有大脑处理视觉的方式都相同。

HTML 语义在 UI 占主导的 Web 中

• 有评论者质疑：既然 Web 大多是 GUI 而不是超文本，HTML 还能算“语义化”吗？
• 回复认为语义仍然重要：标题、链接、按钮和角色定义了结构与行为，使键盘导航和辅助技术成为可能。
• ARIA 角色与属性被视为在 UI 组件之上叠加明确语义的一种方式。

标准与复杂性

• 有批评意见认为，像 <meter> 这样的元素不断增多，会让规范变得庞大而复杂，只有大公司才现实可实现，这反过来强化了浏览器垄断。

总体倾向

• 普遍同意 MDN 的示例很差，但并不意味着 <meter> 本身不好。
• 许多人倾向于将 <meter> 与可见的数值一起使用，而不是在条形图和数字之间二选一。