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″

Note that, unlike the rest of HTML and CSS, named HTML entities are case-sensitive: &Prime; and &prime; are two different glyphs.

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 vulgar fractions with measurements (particularly imperial) if they don’t resolve to a precise decimal (e.g. 1&frac23;″)

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 browsers, search engines, and other tools much easier. For example, a product listing for a desk:

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.