Computer Laboratory

Mathematical expressions in HTML

There are mainly two options today for typesetting mathematical expressions on web pages in a way that works on all major browser. One works for very simple notations, the other requires JavaScript and offers most of the capabilities of LaTeX math mode.

Unicode

If all you need are some mathematical symbols, Greek letters and basic subscripts or superscripts, then Unicode/UTF-8 and HTML4 may be sufficient: e − 1 = 0 or x2+y2+z2.

  • Useful HTML elements: var, sup, sub
  • Greek alphabet: ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθϑικλμνξοπρςστυφχψω
  • Character chart

MathJax

If you need capabilities more like LaTeX (fractions, nested indices, matrixes, etc.), try MathJax. This is a JavaScript library that enhances HTML with many of the mathematical typesetting capabilities of LaTeX, such as \(\mathrm{e}^{\mathrm{i}\pi}-1=0\) or \(\sum_m|u_m|^2<\infty\) or \[ \Phi(z) = \frac{1}{\sqrt{2\pi}} \int_0^x \mathrm{e}^{-\frac12 x^2}\,\mathrm{d}x. \]

To use MathJax on Computer Laboratory web servers, add the following line to your HTML page right after the <title> element:

<script type="text/javascript"
   src="https://www.cl.cam.ac.uk/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

After that, you can use the normal LaTeX math delimiters \(...\) and \[...\] to enclose inline and displayed equations, respectively.