# Marking Up Measurements Correctly in HTML5

The presentation of correctly formatted measurements - feet and inches, meters and quarts - is often neglected on web pages. The challenge of presenting measurements in an intelligent and attractive way is further complicated by the fact that the entire world - with the exception of the United States, Liberia, and Burma - uses the metric system. This makes correctly coded measurements on web pages (which are, by their very nature, international) vital for easy conversion, comprehension and translation.

## Imperial Typography

The correct typographic symbols for feet and inches are not the double and single “dumb” quote marks on your keyboard: they’re the ′ ″ characters, typically encoded on a page as HTML entities.

Correctly rendering 3 feet 6 inches would require both glyphs:

``3&prime;6&Prime;``

Which would result in:

3′6″

Similarly, use the correct symbol for degrees (°) when measuring temperature or angle: `&deg;`. Don’t forget to specify Fahrenheit, Celsius or Kelvin when talking about temperature.

## Metric Measurements

For all other common forms of measurement, shortcuts are fine: 3 m to represent three meters, etc; `in` and `ft` are fine too. A few other points:

• Never abbreviate miles to `m`, to avoid confusion with meters
• Metric units should be seperated with a space. Use a non-breaking space to ensure that the number and unit are not broken across lines during line wrapping: `2&nbsp;m`, for example.
• use ordinals where appropriate for area and volume
• use the correct symbol for “times” or “by” when specifying area: `&times;` For example, `30&nbsp;cm &times; 60&nbsp;cm`, which renders as: 30 cm × 60 cm
• use vulgar fractions with measurements (particularly imperial) if they don’t resolve to a precise decimal (e.g. 1⅔″)
• ideally, provide a means for the user to convert all data presented on a page between imperial and metric

## Measurements & Microdata

If you can’t provide a method of converting units, consider marking up measurements on the page with microdata. This reduces confusion (a poorly coded 30 K for thirty kilometres could otherwise be read as 30 degrees Kelvin, depending on the context). It will also make comprehension and conversion by , search engines, and other tools much easier. For example, a product listing for a desk:

### Before Microdata:

``````<section>
<h1>Proteus Desk</h1>
<img src="desk.jpg" alt>
<p>A stylish desk with a glass-top surface and steel legs.</p>
<ul>
<li>Dimensions:
<ul>
<li>Depth: 50 cm
<li>Width: 60 cm
<li>Height: 60 cm
</ul>
<li>Weight: 10 kg
</ul>
</section>``````

### After Microdata:

``````<section itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Proteus Desk</h1>
<img src="desk.jpg" alt="Proteus desk" itemprop="image">
<p itemprop="description">A stylish desk with a glass-top surface and steel legs.</p>
<ul>
<li>Dimensions
<ul>
<li>Depth:
<span itemprop="depth" itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">50</span>
&nbsp;
<data itemprop="unitCode" value="CMT">cm</data>
</span>
<li>Width:
<span itemprop="width" itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">60</span>
&nbsp;
<data itemprop="unitCode" value="CMT">cm</data>
</span>
<li>Height:
<span itemprop="height" itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">60</span>
&nbsp;
<data itemprop="unitCode" value="CMT">cm</data>
</span>
</ul>
<li>Weight
<span itemprop="weight" itemscope itemtype="http://schema.org/QuantitativeValue">
<span itemprop="value">10</span>
&nbsp;
<data itemprop="unitCode" value="KGM">kg</data>
</span>
</ul>
</section>``````

A few notes:

• obviously, this solution involves far more markup, but provides significant advantages in precision and accuracy: anything that touches the page can know exactly what each component of the markup means.
• For product lines larger than three items, a MySQL database and some intelligent parsing with PHP would be used to generate this code, as opposed to creating it by hand.
• The HTML5 `<data>` tag is used to encode information on the measurement unit.
• The values for unit type are UN/CEFACT Common Codes.

In the next article, I’ll look at in-page conversion of measurements between metric and imperial units.