How should I markup units of measurement in HTML5? (Centimetres, grams, etc.)

Question

I markup a table which contains values with units of measurement. I thought about how to mark up the document for the best accessibility. Is it important to respect variable values and constant names for values?

I did not find any <value>, <unit> element or an appropriate attribute for this case.

My three markup approachs

<table>
   <td>Brain weight</td>
   <td>3.8<em>g</em></td>
</table>

———————————— o r ————————————

<table>
   <td>Brain weight</td>
   <td><em>3.8</em>g</td>
</table>

———————————— o r ————————————

<table>
   <td>Brain weight</td>
   <td>3.8<abbr title="Grams">g</abbr></td>
</table>

Answer 1

I like very much your third approach of using an abbr tag for adding contextual information and improving accessibility. It's a great idea.

However, neither of your markups is fully compliant with the rules of the International System of Units. See http://en.wikipedia.org/wiki/International_System_of_Units

You must separate the value and the unit by one space character.

 <td>3.8&nbsp;<abbr title="Grams">g</abbr></td>

Answer 2

Using em for the unit/value would be incorrect (typically; of course there are some cases where it might be appropriate, but not in general). The em element "represents stress emphasis of its contents" ("The placement of stress emphasis changes the meaning of the sentence.").

Using the abbr element for the unit would be correct (might be useful for various use cases).

In your examples you've used table with td as childs. This is not valid markup. If you'd only have such name-value pairs, you could use a dl:

<dl>
  <dt>Brain weight</dt>
  <dd>3.8&nbsp;<abbr title="grams">g</abbr></dd>
</dl>

---

There is a draft for a measure microformat.

---

In the WHATWG version of HTML ("Living Standard") you can find a data element. For some time it was part of the W3C HTML5 draft, too, but it has been removed.

Answer 3

There is no markup for units of measurements in HTML, or for numbers, so if you need some markup for them (e.g., in order to style them uniformly or to process them with a client-side script), use a span element with a class attribute for numbers or units or both, e.g.

<td><span class=number>3.8</span> <span class=unit>g</span></td>

(Note that by international standards, number and unit shall be separated by a space, which can be a nonbreaking space,  , if needed).

Normally, no markup is needed for units. Or, rather, there is no markup we could use for a useful purpose, and writing span markup just for the fun of it makes the HTML code less readable.

In some interpretations, however, symbols of units are abbreviations, so abbr markup could be used. Note that this by default causes a dotted line under (bottom border) in most browsers, a mostly irritating feature; to remove it, set abbr { border: none } in CSS. By essence, symbols of units are conventional notations rather than abbreviations.

Using a title attribute, on span, abbr, or other element, makes some assistive software show the attribute value when requested by the user. It also tends to make it shown in a tooltip in common browsers. It is questionable whether such “hints” are useful rather than just disturbing for commonly known symbols.

Using em would mean emphasis in principle, which is hardly appropriated, and would cause italic to be used in practice. By international standards, symbols of units shall never be italicized. Although you can use CSS to remove italic, it would be odd to use markup that tends to cause it.

Answer 4

<abbr title="Grams">g</abbr>

Apology for miss-understanding the issue previously...right answer is above before html5 i use a meaningful id/class. No advantage of defining own tags for above problem.

thanks all for correcting me.