Which HTML tags are more appropriate for money?

Question

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.

Solution 1

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!

Solution 2

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

Solution 3

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.

Solution 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>

Solution 5

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

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

View more solutions

Comments

[Fabrizio Calderan]

<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

[Fabrizio Calderan]

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?

[Alix Axel]

@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.

[Fabrizio Calderan]

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.

[Fabrizio Calderan]

anyway I would strongly suggest the introduction of a tag <amount> for web-semantic purposes. :)

[Oli Studholme]

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…

[Nathan Pitman]

"...nobody really cares too much about semantics. Nice to have, but in reality all that matters is styling" - Seriously?

[Ansel Halliburton]

@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

[jackvsworld]

@Pumbaa80 Yes, that is considered a bad practice; it should not be encouraged.

[squeezy]

@OliStudholme We have <time> and <address>, so why not <currency>?

[pilau]

@fatsokol that's the strongest argument so far. I support this.

[Tyler Smith]

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.

[Tyler Smith]

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.

[Tyler Smith]

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>

[Neil]

This approach also lends itself to having multiple definitions, like values in other currencies, I like this one.

[Izhar Aazmi]

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.