Writing Fractions In HTML


Fractions are an important part of science mathematics. A fraction is a representation of one number divided by another. On paper, they are written with two numbers arranged vertically with a line separating them. The top number (numerator) is divided by the bottom number (denominator). One half is 1 divided by 2 and is expressed as 1 over 2 with a line between them: ½.

Unfortunately writing fractions in HTML is a little tricky. Text on web documents is written straight across with where only one character can take up one space on the line. Characters can be moved vertically, but cannot have another character immediately below them. To write a fraction, people write fractions with a slash symbol (/) between the numbers.

3/4 – three fourths
1/2 – one half
5/9 – five ninths
99/100 – 99 hundredths

There is a better way. These same fractions can look like ¾, ½, 59, and 99100.

If your fraction is a simple one with a single digit numerator and a single digit denominator, you can often use the &fracxy; code where x is the numerator and y is the denominator.

½ is ½
⅓ is ⅓
⅔ is ⅔
¼ is ¼

Not all single digit numbers work with this command. For example &frac26; shows &frac26 in a browser, not 26.

For these cases, and for fractions involving larger numbers, there is a trick you can use. The HTML code ⁄ draws the fraction slash. Think &fractionslash; to remember it. The format for this is:


This will give a result similar to using the slash key. The only difference is the angle the dividing line takes and how close the numbers are to the line. For example, five ninths looks like:

slash (/) key:   5/9
&frasl; code: 5⁄9

The effect can be improved by adding the superscript and subscript formatting to the numbers. Add the <sup></sup> code around the numerator and <sub></sub> around the denominator.

<sup>5</sup>&frasl;<sub>9</sub> looks like 59.

This looks much better. With this trick, you can express any fraction inline with your HTML text.