Brief Tutorial on MathML

Andreas de Vries (2012)

To view this page correctly, a browser being able to interprete MathML is required. Unfortunately, not all browsers to date have this ability, a recommended one is the current version of Firefox, see also the Mozilla MathML Project.

This tutorial is a brief primer on MathML. It should suffice to let display easy mathematical formulas in the Web. For further informations you may refer to the Math web site of W3C.

### 1. Basic Elements

With MathML it is possible to insert mathematical symbols, expressions and formulas into the `<body>` element of an HTML documents, such that appropriate browsers can display them. For this purpose, a mathematical expression “...” has to be inserted into the element `[itex]` with a specified namespace:

```  <math xmlns="http://www.w3.org/1998/Math/MathML"> ... [/itex]
```

(The namespace `xmlns`... may be omitted with HTML5, since then it is sufficient to write simply `[itex] ... [/itex]`.) The symbols to be represented have to be inserted as text into one of the following basic elements of the `[itex]` element:

• `<mi>` for variables, e.g., `<mi>x</mi>` for “$x$”;
• `<mn>` for number values, e.g., `<mn>2</mn>` for “$2$”;
• `<mo>` for mathematical operators, e.g., `<mo>+</mo>` for “$+$”, `<mo>-</mo>` for “$-$” or `<mo>=</mo>` for “$=$”.

These basic elements are therefore necessary for every expression in MathML and determine the font style of the inserted symbols. The elements `<mn>` and `<mo>` can contain several symbols, however, `<mi>` can contain only one-letter variables.

As a first “Hello World” example in MathML we consider the following tedious, but structurally simple expression

```   [itex]
<mn>4</mn>
<mi>x</mi>
<mo>+</mo>
<mn>4</mn>
<mo>=</mo>
<mo>(</mo>
<mn>2</mn>
<mo>+</mo>
<mn>2</mn>
<mo>)</mo>
<mi>x</mi>
<mo>+</mo>
<mn>2</mn>
<mo>&middot;</mo>
<mn>2</mn>
[/itex]
```

which yields the equation $4x+4=\left(2+2\right)x+2·2$

Another important element in MathML is `<mrow>` which groups several MathML elements to a single unit, a term. For simple examples it usually does not have a visible effect, but we will see below cases where it is necessary.

### 2. Constants and Symbols

In the following table you find a selection of the most common mathematical symbols and their definitions in MathML:

 $\alpha$ `α` $\pi$ `π` $\infty$ `` $±$ `±` $\mp$ `` $\hslash$ `` $\sum$ `` $\int$ `` $\exists$ `` $\forall$ `` $⇔$ `` $⇒$ `` $\ne$ `` $\approx$ `` $\sim$ `` $\cong$ `` $\propto$ `` $\stackrel{\wedge}{=}$ `` $<$ `<` $\le$ `` $\ll$ `` $>$ `>` $\ge$ `` $\gg$ `` $·$ `·` $×$ `×` $\circ$ `` $÷$ `÷` $\setminus$ `` $\oplus$ `` $\cap$ `` $\cup$ `` $\subset$ `` $\supset$ `` $\in$ `` $\notin$ `` $\wedge$ `` $\vee$ `` $¬$ `¬` $\to$ `` $↦$ `` $\sphericalangle$ `` $\varnothing$ `` $ℕ$ `` $ℤ$ `` $ℚ$ `` $ℝ$ `` $ℂ$ ``

A complete list of all possible symbols is given at http://www.w3.org/TR/xml-entity-names/. See also https://wiki.selfhtml.org/wiki/Zeichenreferenz.

In addition, symbols and terms can be provided with various accents using the element `<mover>`: $\stackrel{⇀}{v}+\stackrel{\to }{w}+\stackrel{˜}{m}+\stackrel{_}{y}+\stackrel{^}{m}$ are obtained with the expressions

```  <mover><mi>v</mi><mo>&rharu;</mo></mover>
<mo>+</mo>
<mover><mi>w</mi><mo>&rarr;</mo></mover>
<mo>+</mo>
<mover><mi>m</mi><mo>&tilde;</mo></mover>
<mo>+</mo>
<mover><mi>y</mi><mo>_</mo></mover>
<mo>+</mo><mover><mi>m</mi><mo>^</mo></mover>
```

### 3. Exponents and Indices

Expressions can be written as superscripts or subscripts by the elements `<msup>` for exponents and `<msub>` for indices, e.g.,

```   <msub>
<mi>y</mi>
<mn>0</mn>
</msub>
<mo>=</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
```

for ${y}_{0}={x}^{2}$ . Also more complex terms can be displayed in the exponent, they only have to be grouped by the element `<mrow>`: for $y={x}^{2k+1}$ we write in MathML:

```   <mi>y</mi>
<mo>=</mo>
<msup>
<mi>x</mi>
<mrow>
<mn>2</mn>
<mi>k</mi>
<mo>+</mo>
<mn>1</mn>
</mrow>
</msup>
```

### 4. Functions

Functions usually are displayed in italic letters, thus they should be included into `<mi>` tags. However, names for standard functions like sine, cosine, logarithm etc. are represented in roman letters, and so several letters enclosed by `<mi>` tags are not displayed in italic. For instance, the function definition $f:ℝ\to \left[-1,1\right]$, $f\left(x\right)=\mathrm{sin}x$ is generated by:

```   [itex]
<mi>f</mi><mo>:</mo><mn>&reals;</mn><mo>&rarr;</mo><mn>[-1,1]</mn>
[/itex],
[itex]
<mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo>
<mo>=</mo>
<mi>sin</mi>
<mi>x</mi>
[/itex]
```

### 5. Fractions

A fraction is generated by the element `<mfrac>`. For example, $\frac{x}{y}$ is generated by
```   <mfrac>
<mi>x</mi>
<mi>y</mi>
</mfrac>
```
If the numerator or the denominator consists of several terms, they have to be grouped by `<mrow>` to separate units: $f\left(x,y\right)=\frac{13x-37}{2y+1}$
```   <mi>f</mi><mo>(</mo><mi>x</mi><mo>,</mo>,<mi>y</mi><mo>(≤/mo>
<mo>=</mo>
<mfrac>
<mrow>
<mn>13</mn>
<mi>x</mi>
<mo>-</mo>
<mn>37</mn>
</mrow>
<mrow>
<mn>2</mn>
<mi>y</mi>
<mo>+</mo>
<mn>1</mn>
</mrow>
</mfrac>
```

### 6. Indented Formulas

A mathematical expression may appear inline the running text: $f(x,y) = x y$ , or indented from the running text and centered (“block”): $f(x,y) = x y .$ These representation modes in MathML are determined by the attribute `display` of the `[itex]` element:

```  <math display="inline"> ... [/itex]
```
or
```  <math display="block"> ... [/itex]
```

In the display mode the letters and symbols in numerators and denominators are set in normal size, whereas in the inline mode they are displayed in a smaller font. If the display attribute is not used, it is set to its default value `"inline"`.

### 7. Root Expressions

In mathematical notation the root symbol usually extends over a term. In MathML the root symbol is generated by the element `<msqrt>`:

```   <msqrt>
<mrow>
<mn>1</mn>
<mo>-</mo>
<mfrac>
<mi>x</mi>
<mn>2</mn>
</mfrac>
</mrow>
</msqrt>
```

yields $\sqrt{1-\frac{x}{2}}$ The p-q formula, for example, $x = - p 2 ± 1 2 p 2 - 4 q$

is generated by the source code
```   <math display="block">
<mi>x</mi>
<mo>=</mo>
<mo>-</mo>
<mfrac>
<mi>p</mi>
<mn>2</mn>
</mfrac>
<mo>&pm;</mo>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
<msqrt>
<mrow>
<msup>
<mi>p</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mrow>
<mn>4</mn>
<mi>q</mi>
</mrow>
</mrow>
</msqrt>
[/itex]
```
To display roots with indices different from 2, i.e., to use other roots than the square root, MathML provides the element `<mroot>` which expects two subelements, first the term from which the root is to be extracted, and second the index:
```   <mroot>
<mrow>
<mn>1</mn>
<mo>-</mo>
<mfrac>
<mi>x</mi>
<mn>2</mn>
</mfrac>
</mrow>
<mn>3</mn>
</mroot>
```
thus yields $\sqrt[3]{1-\frac{x}{2}}$.

### 8. Matrices

To write matrices, we need the element `<mrow>`, enclosing the table element `<mtable>` surrounded by two brackets `<mo>(</mo>` ... `<mo>)</mo>`: ${\sigma }_{y}=\left(\begin{array}{cc}0& -i\\ i& 0\end{array}\right)$ is generated by the instructions

```  <msub><mn>&sigma;</mn><mi>y</mi></msub>
<mo>=</mo>
<mrow>
<mo>(</mo>
<mtable>
<mtr>
<mtd><mn>0</mn></mtd>
<mtd><mo>-</mo><mn>i</mn></mtd>
</mtr>
<mtr>
<mtd><mn>i</mn></mtd>
<mtd><mn>0</mn></mtd>
</mtr>
</mtable>
<mo>)</mo>
</mrow>
```

Evidently, `<mtable>` has the same structure as an HTML table `<table>`, only with a mandatory `m` prefix in the element name. We can also display other brackets, for instance square or curly brackets:

```  <mi>R</mi><mo>(</mo><mi>x</mi><mo>)</mo>
<mo>=</mo>
<mrow>
<mo>[</mo>
<mtable>
<mtr>
<mtd><mi>cos</mi><mi>x</mi></mtd>
<mtd><mo>-</mo><mi>sin</mi> <mi>x</mi></mtd>
</mtr>
<mtr>
<mtd><mi>sin</mi><mi>x</mi></mtd>
<mtd><mi>cos</mi><mi>x</mi></mtd>
</mtr>
</mtable>
<mo>]</mo>
</mrow>
```

thus yields $R\left(x\right)=\left[\begin{array}{cc}\mathrm{cos}x& -\mathrm{sin}x\\ \mathrm{sin}x& \mathrm{cos}x\end{array}\right]$.

### 9. Sums and Integrals

In MathML, the limits of sums, products or integrals are enabled by the element `<munderover>`. It expects three elements in the ordered sequence: symbol (sum `&sum;` or integral `&int;`), the lower limit, and the upper limit. For example, the formula $\underset{1}{\overset{e}{\int }}\frac{dx}{x}=1$ is implemented by

```  <munderover>
<mo>&int;</mo>
<mn>1</mn>
<mn>e</mn>
</munderover>
<mfrac><mrow><mo>d</mo><mi>x</mi></mrow><mi>x</mi></mfrac>
<mo>=</mo>
<mn>1</mn>
.
```

If one of the limits is not intended to be displayed, its place has to occupied by an empty element `<mn></mn>`. A peculiarity concerning the limits of sums is the possibility to distinguish between the display modes inline and display. The source code

```  <munderover>
<mo>&sum;</mo>
<mn>1</mn>
<mn>2</mn>
</munderover>
<mfrac><mn>1</mn><mi>k</mi></mfrac>
<mo>=</mo>
<mn>1,5</mn>
```

gives $\sum _{1}^{2}\frac{1}{k}=1,5$ in the running tex, i.e., the limits are displayed beside the sum symbol. If the limits are intended to be below and above the sum symbol, that is, $\sum _{1}^{2}\frac{1}{k}=1,5$, we insert the terms into an element `<mstyle displaystyle="true">`:

```  <mstyle displaystyle="true">
<munderover>
<mo>&sum;</mo>
<mn>1</mn>
<mn>2</mn>
</munderover>
<mfrac><mn>1</mn><mi>k</mi></mfrac>
<mo>=</mo>
<mn>1,5</mn>
</mstyle>.
```

In contrast, in formulas in display mode the limits are automatically arranged below and above the sum symbol, as can be observed for the equations of Euler and Riemann, Here $\zeta$ denotes the Riemann zeta function, $ℙ$ the set of primes, $\Gamma$ die Gamma function $\Gamma \left(s\right)=\underset{0}{\overset{\infty }{\int }}{t}^{s-1}{e}^{-t}dt$ and $C$ an integration path in the complex plane, starting at $+\infty$, then circling once around the origin in positive sense without meeting the points $±2\pi i$, $±4\pi i$, ..., and eventually turning back to $+\infty$. Cf. E.C. Titchmarsh & D.R. Heath-Brown: The Theory of the Riemann Zeta-function. Clarendon Press, Oxford 1986, Eqn. (2.4.2), as well as J. Neukirch: Algebraic Number Theory. Springer-Verlag, Berlin Heidelberg 1999, §VII.1. The source code of these identities reads:

```   <math display="block">
<mi>&zeta;</mi> <mo>(</mo><mi>s</mi><mo>)</mo>
<mo>=</mo>
<munderover>
<mo>&sum;</mo>
<mrow><mi>n</mi><mo>=</mo><mn>1</mn></mrow>
<mi>&infin;</mi>
</munderover>
<mfrac>
<mn>1</mn>
<msup><mi>n</mi><mi>s</mi></msup>
</mfrac>
<mo>=</mo>
<munderover>
<mo>&prod;</mo>
<mrow><mi>p</mi><mo>&isin;</mo><mn>&primes;</mn></mrow>
<mn></mn>
</munderover>
<mfrac>
<mn>1</mn>
<mrow><mn>1</mn><mo>-</mo><msup><mi>p</mi><mrow><mo>-</mo><mi>s</mi></mrow></msup></mrow>
</mfrac>
<mo>=</mo>
<mfrac>
<mrow>
<msup><mn>e</mn><mrow><mo>-</mo><mn>i</mn><mn>&pi;</mn><mi>s</mi></mrow></msup>
<mn>&nbsp;</mn>
<mn>&Gamma;</mn><mo>(</mo><mn>1</mn><mo>-</mo><mi>s</mi><mo>)</mo>
</mrow>
<mrow>
<mn>2</mn><mn>&pi;</mn><mn>i</mn>
</mrow>
</mfrac>
<munderover>
<mo>&int;</mo>
<mi>C</mi>
<mn></mn>
</munderover>
<mfrac>
<mrow><msup><mi>z</mi><mrow><mi>s</mi><mo>-</mo><mn>1</mn></mrow></msup><mo>d</mo><mi>z</mi></mrow>
<mrow><msup><mn>e</mn><mi>z</mi></msup><mo>-</mo><mn>1</mn></mrow>
</mfrac>
<mn>&emsp;</mn><mn>&emsp;</mn>
<mo>(</mo><mi>s</mi><mo>&isin;</mo><mn>&complexes;</mn>
<mo>,</mo><mn>&nbsp;</mn>
<mo>Re</mo><mi>s</mi><mo>></mo><mn>1</mn>
<mo>)</mo>
[/itex]
```

© 2012-2023 Andreas de Vries