44

If you had to properly choose one HTML tag to represent a price, a money amount or an account balance, (e.g. 3/9/2012 - Income: 1.200,00 € or item #314159 - price: $ 31,99) then

  • which tag would you choose for the amount and why?
  • should the currency also be wrapped in its own tag or not?

I'd really like to avoid a generic inline element like <span class="income">1.200,00 €</span> or <span class="price">$ 31,99</span> but so far I've found no references about it.

6 Answers 6

35

The HTML spec for var states:

The var element represents a variable. This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a function parameter, or just be a term used as a placeholder in prose.

For me this means that <var> is not suitable for the prices in your examples. It depends on what you are trying to accomplish, but it seems your options are:

  1. Use microdata (ref), for example Schema.org’s offer vocabulary for a product’s price
  2. Use <b> if you’d like to draw attention to the price without indicating it’s more important (ref)
  3. Use <strong> if the price is important, such as the total price of an itemised receipt
  4. Use <span> with a class if you need an element to style the price differently, but <b> and <strong> are not appropriate
  5. If nothing above is suitable and you don’t want to style the price, don’t do anything

From the examples you’ve given there doesn’t seem to be any need to mark up prices. If the examples are from a table to display financial information, make sure they’re in a column headed by <th scope="col">Income</th> or <th scope="col">Price</th> respectively for accessibility.

Hope that helps!

5
  • Nice :) looking at <b> description «The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance». it could be the most suitable tag if I've to show multiple amounts in a page with the same relevance. Mar 23, 2012 at 12:09
  • 3
    anyway I would strongly suggest the introduction of a tag <amount> for web-semantic purposes. :) Mar 23, 2012 at 12:25
  • 3
    Why do you want an element for prices? What do you hope to accomplish with it? Adding “semantics for the sake of semantics” is not a good enough reason to add a new element, so you need some use cases and real benefits… Mar 24, 2012 at 6:02
  • 7
    @OliStudholme We have <time> and <address>, so why not <currency>?
    – squeezy
    Jan 26, 2017 at 10:51
  • @fatsokol that's the strongest argument so far. I support this.
    – pilau
    Feb 8, 2017 at 19:24
14

Looking at the HTML5 specs, it's rather clear that a price is not considered to be a semantic entity. And I agree. Think about it this way:

If there were semantic elements, this would be the result

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

What is it that makes 5 dollars different from 2 oranges? Should we add a <fruit> tag too?

which tag would you choose for the amount and why?

A span with a class, if you want to add some CSS.
Because nobody really cares too much about semantics. Nice to have, but in reality all that matters is styling.

The currency should be also wrapped in its own tag or not?

Definitely not.

I'd really like to avoid a generic inline element

Why?

You may decide to use <i> if you want to express the "special nature of money".

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, ...
http://dev.w3.org/html5/spec/the-i-element.html

5
  • 15
    "...nobody really cares too much about semantics. Nice to have, but in reality all that matters is styling" - Seriously? Mar 27, 2013 at 9:51
  • @NathanPitman Well, obviously I'm exaggerating a bit. Still, elements like address, dl and samp are never seen while html is usually flooded with divs Mar 27, 2013 at 20:37
  • @Pumbaa80 Yes, that is considered a bad practice; it should not be encouraged. Dec 13, 2014 at 21:12
  • 4
    I know this answer is nearly 5 years old, but it seems that having semantic support for money as you describe would be a great feature for cryptocurrency usability and security. It could almost certainly support other systems too (e.g. venmo, paypal). This would allow plugins like the ShapeShift Lens to have a smoother and safer UX. Feb 24, 2017 at 10:11
  • 1
    This example intentionally puts money in the particular context so that it is not relevant for it to be treated as money. There are cases where it indeed has special significance. Mar 23, 2019 at 8:48
12

What about <data>?

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

According to the HTML5 spec:

The data element represents its contents, along with a machine-readable form of those contents in the value attribute.

When combined with microformats or microdata, the element serves to provide both a machine-readable value for the purposes of data processors, and a human-readable value for the purposes of rendering in a Web browser. In this case, the format to be used in the value attribute is determined by the microformats or microdata vocabulary in use.

In this case you could also use microdata to add additional information about the kind of currency, etc.

1
  • This is an excellent suggestion and likely what I will do for my use-case. This method allows flexibility (e.g. the fruit vs money argument pointed out in another answer) while still allow applications that can enhance the typical web experience. Feb 24, 2017 at 10:14
4

I would use a definition list here.

The HTML element (or HTML Description List Element) encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

<dl>
   <dt>Income:</dt>
   <dd>1.200,00 €</dd>
   <dt>Price:</dt>
   <dd>$31,99</dd>
</dl>
1
  • This approach also lends itself to having multiple definitions, like values in other currencies, I like this one.
    – Neil
    Sep 19, 2017 at 8:52
1

I can't see anything more semantic than var either:

<var>1.200,00 <abbr title="EUR">€</abbr></var>
3
  • 1
    Good point for <abbr> but I still have some doubts for <var>: dev.w3.org/html5/spec/Overview.html#the-var-element I think the amount can't be considered as a variable, or as a part of an expression/equation. e.g. If I had to list prices how can they be considered like variables? Mar 9, 2012 at 11:04
  • @FabrizioCalderan: I'm not saying it's the most semantic thing ever, but to an accountant/economist I think he can consider prices as variables. Anyway, I think you'll have to choose between that or the plain simple span. Another alternative would be dl, dt and dd.
    – Alix Axel
    Mar 9, 2012 at 13:17
  • 2
    While this is technically semantic the semantics it represents are not financial which seems to be the spirit of the question. Instead of generic semantics like var and abbr it would be extremely useful in the coming years to have something like <money currency="EUR" value="120000" /> or even (as suggested in another answer) <data class="money" value="120000" currency="EUR">€1.200,00</data> Feb 24, 2017 at 10:19
-3

Use the var tag. Is described as: "Variable or user defined text"

<var> </var>
1
  • 5
    <var> :This could be an actual variable in a mathematical expression or programming context, an identifier representing a constant, a function parameter, or just be a term used as a placeholder in prose. it seems not suitable for this purpose Mar 9, 2012 at 10:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.