哪些 HTML 标签更适合金钱？

Posted 2023-02-24

【中文标题】哪些 HTML 标签更适合金钱？

【英文标题】：Which HTML tags are more appropriate for money?

【发布时间】：2012-03-26 19:13:14

【问题描述】：

如果您必须正确选择一个 html 标记来表示价格、金额或帐户余额（例如 3/9/2012 - Income: 1.200,00 € 或 item #314159 - price: $ 31,99），那么

您会为金额选择哪个标签？为什么？ 货币是否也应该用自己的标签包裹？

我真的很想避免使用像 <span class="income">1.200,00 €</span> 或 <span class="price">$ 31,99</span> 这样的通用内联元素，但到目前为止我还没有找到关于它的参考资料。

【参考方案1】：

使用 var 标签。被描述为：“变量或用户定义的文本”

<var> </var>

【讨论】：

<var> ：这可能是数学表达式或编程上下文中的实际变量，表示常量的标识符，函数参数，或者只是用作散文中的占位符的术语。好像不适合这个目的

【参考方案2】：

我也看不到比 var 更语义化的东西：

<var>1.200,00 <abbr title="EUR">€</abbr></var>

【讨论】：

<abbr> 的观点很好，但我对<var> 仍有一些疑问：dev.w3.org/html5/spec/Overview.html#the-var-element 我认为不能将金额视为变量或表达式/方程式的一部分.例如如果我必须列出价格，它们怎么能被视为变量？

@FabrizioCalderan：我并不是说这是有史以来最语义化的事情，但对于会计师/经济学家来说，我认为他可以将价格视为变量。无论如何，我认为您必须在那个或简单的span 之间做出选择。另一种选择是dl、dt 和dd。

虽然这在技术上是语义，但它所代表的语义不是金融的，这似乎是问题的精神。而不是像var和abbr这样的通用语义，在未来几年内拥有<money currency="EUR" value="120000" />甚至（如另一个答案中所建议的）<data class="money" value="120000" currency="EUR">€1.200,00</data>

【参考方案3】：

HTML spec for var 声明：

var 元素代表一个变量。这可能是一个实际的 数学表达式或编程上下文中的变量， 表示常量、函数参数或只是一个 散文中用作占位符的术语。

对我来说，这意味着<var> 不适合您示例中的价格。这取决于您要完成的工作，但您的选择似乎是：

使用微数据 (ref)，例如 Schema.org’s offer vocabulary 获取产品价格 如果您想引起人们对价格的关注，但不想表明价格更重要，请使用 <b> (ref) 如果价格很重要，例如明细收据的总价，请使用 <strong> 如果您需要一个元素来设置不同的价格样式，请在类中使用 <span>，但 <b> 和 <strong> 不合适 如果以上都不合适并且您不想设置价格样式，不要做任何事情

从您提供的示例来看，似乎不需要加价。如果示例来自用于显示财务信息的表格，请确保它们分别位于以<th scope="col">Income</th> 或<th scope="col">Price</th> 为标题的列中，以便访问。

希望有帮助！

【讨论】：

不错 :) 看着 <b> 描述 «b 元素表示一个文本范围，出于实用目的而关注该文本范围，但没有传达任何额外的重要性»。如果我必须在具有相同相关性的页面中显示多个金额，它可能是最合适的标签。

无论如何我强烈建议引入标签<amount> 用于网络语义目的。 :)

为什么需要价格元素？你希望用它完成什么？添加“为语义而语义”并不是添加新元素的充分理由，因此您需要一些用例和真正的好处……

@OliStudholme 我们有<time> 和<address>，那为什么不<currency>？

@fatsokol 这是迄今为止最有力的论据。我支持这个。

【参考方案4】：

查看HTML5 specs，很明显价格不被视为语义实体。并且我同意。这样想：

如果有语义元素，这就是结果

<p>
   I have 4 apples, 2 oranges and <money>5 <currency>dollars</currency></money>.
</p>

是什么让 5 美元与 2 个橙子不同？我们是否也应该添加一个<fruit> 标签？

您会为金额选择哪个标签，为什么？

如果您想添加一些 CSS，请使用 span 和 class。 因为没有人真正关心语义。很高兴拥有，但实际上最重要的是造型。

货币是否也应该包含在自己的标签中？

绝对不是。

我真的很想避免使用通用的内联元素

为什么？

如果你想表达“金钱的特殊性”，你可以决定使用<i>。

i 元素表示一段文本以另一种声音或语气，或以其他方式偏离正常散文以指示不同质量的文本，...@987654322 @

【讨论】：

"...没有人真正关心语义。很高兴拥有，但实际上最重要的是样式" - 认真吗？

@NathanPitman 好吧，显然我有点夸张了。尽管如此，像 address、dl 和 samp 这样的元素却从未见过，而 html 通常充斥着 divs

@Pumbaa80 是的，这被认为是一种不好的做法；不应该鼓励它。

我知道这个答案已经有将近 5 年的历史了，但您所描述的对货币的语义支持似乎对加密货币的可用性和安全性来说是一个很棒的功能。它几乎可以肯定也支持其他系统（例如 venmo、paypal）。这将允许像ShapeShift Lens 这样的插件拥有更流畅、更安全的用户体验。

这个例子故意将钱放在特定的上下文中，这样它就不会被视为钱。在某些情况下，它确实具有特殊意义。

【参考方案5】：

<data> 呢？

<p>The price is <data class="money" value="100.00">$100</data>.</p>

根据HTML5 spec：

data 元素表示其内容，以及 value 属性中这些内容的机器可读形式。

当与微格式或微数据结合使用时，该元素既可以为数据处理器提供机器可读值，也可以为在 Web 浏览器中呈现的人类可读值提供。在这种情况下，值属性中使用的格式由所使用的微格式或微数据词汇决定。

在这种情况下，您还可以使用microdata 添加有关货币种类等的其他信息。

【讨论】：

这是一个很好的建议，很可能我会为我的用例做些什么。这种方法具有灵活性（例如另一个答案中指出的水果与金钱的争论），同时仍然允许可以增强典型 Web 体验的应用程序。

【参考方案6】：

我会在这里使用definition list。

HTML 元素（或 HTML 描述列表元素）包含一个 成对的术语和描述列表。此元素的常见用途 是实现词汇表或显示元数据（列表 键值对）。

<dl>
   <dt>Income:</dt>
   <dd>1.200,00 €</dd>
   <dt>Price:</dt>
   <dd>$31,99</dd>
</dl>

【讨论】：

这种方法也适用于多种定义，比如其他货币的值，我喜欢这个。