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.

Answer 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!