Which HTML tags are more appropriate for money?

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


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!


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.

Tags:

Html

Semantics