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.

Basic Elements
Constants and Symbols
Exponents and Indices
Functions
Fractions
Indented Formulas
Root Expressions
Matrices
Sums and Integrals

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 <math> with a specified namespace:

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

(The namespace xmlns... may be omitted with HTML5, since then it is sufficient to write simply <math> ... </math>.) The symbols to be represented have to be inserted as text into one of the following basic elements of the <math> 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

   <math>
     <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>
   </math>

which yields the equation $4 x + 4 = (2 + 2) x + 2 \cdot 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:

$α$	`<mn>α</mn>`	$π$	`<mn>π</mn>`	$∞$	`<mn>∞</mn>`	$±$	`<mn>&pm;</mn>`	$∓$	`<mn>&mp;</mn>`	$ℏ$	`<mn>&hbar;</mn>`
$\sum$	`<mo>∑</mo>`	$\int$	`<mo>∫</mo>`	$\exists$	`<mo>∃</mo>`	$\forall$	`<mo>∀</mo>`	$\Leftrightarrow$	`<mo>&iff;</mo>`	$⇒$	`<mn>&Rightarrow;</mn>`
$\neq$	`<mo>≠</mo>`	$\approx$	`<mo>≈</mo>`	$\sim$	`<mo>&sim;</mo>`	$≅$	`<mo>&cong;</mo>`	$\propto$	`<mo>&propto;</mo>`	$≙$	`<mo>&wedgeq;</mo>`
$<$	`<mo><</mo>`	$\leq$	`<mo>&leq;</mo>`	$≪$	`<mo>&ll;</mo>`	$>$	`<mo>></mo>`	$\geq$	`<mo>&geq;</mo>`	$≫$	`<mo>&gg;</mo>`
$\cdot$	`<mo>·</mo>`	$\times$	`<mo>×</mo>`	$\circ$	`<mo>&compfn;</mo>`	$\div$	`<mo>&div;</mo>`	$∖$	`<mo>&setminus;</mo>`	$\oplus$	`<mo>&oplus;</mo>`
$\cap$	`<mo>∩</mo>`	$\cup$	`<mo>∪</mo>`	$\subset$	`<mo>&subset;</mo>`	$\supset$	`<mo>&supset;</mo>`	$\in$	`<mo>∈</mo>`	$\notin$	`<mo>∉</mo>`
$\land$	`<mo>&wedge;</mo>`	$\lor$	`<mo>&vee;</mo>`	$\neg$	`<mo>¬</mo>`	$\to$	`<mo>&rightarrow;</mo>`	$\mapsto$	`<mo>&mapsto;</mo>`	$∢$	`<mo>&angsph;</mo>`
$∅$	`<mn>&emptyset;</mn>`	$ℕ$	`<mn>&naturals;</mn>`	$ℤ$	`<mn>&integers;</mn>`	$ℚ$	`<mn>&rationals;</mn>`	$ℝ$	`<mn>&reals;</mn>`	$ℂ$	`<mn>&complexes;</mn>`

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>: $\overset{⇀}{v} + \vec{w} + \tilde{m} + \overline{y} + \hat{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^{2 k + 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 [-1,1]$ , $f (x) = \sin x$ is generated by:

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

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 (x, y) = \frac{13 x - 37}{2 y + 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) = \frac{x}{y}$ , or indented from the running text and centered (“block”): $f (x, y) = \frac{x}{y} .$ These representation modes in MathML are determined by the attribute display of the <math> element:

  <math display="inline"> ... </math>

  <math display="block"> ... </math>

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 = - \frac{p}{2} \pm \frac{1}{2} \sqrt{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>
   </math>

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>: $σ_{y} = (\begin{matrix} 0 & - i \\ i & 0 \end{matrix})$ 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 (x) = [\begin{matrix} \cos x & - \sin x \\ \sin x & \cos x \end{matrix}]$ .

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 ∑ or integral ∫), the lower limit, and the upper limit. For example, the formula $\int_{1}^{e} \frac{d x}{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, $ζ (s) = \sum_{n = 1}^{\infty} \frac{1}{n^{s}} = \prod_{p \in ℙ}^{} \frac{1}{1 - p^{- s}} = \frac{e^{- i π s} Γ (1 - s)}{2 π i} \int_{C}^{} \frac{z^{s - 1} d z}{e^{z} - 1} (s \in ℂ, Re s > 1) .$ Here $ζ$ denotes the Riemann zeta function, $ℙ$ the set of primes, $Γ$ die Gamma function $Γ (s) = \int_{0}^{∞} t^{s - 1} e^{- t} d t$ and $C$ an integration path in the complex plane, starting at $+ ∞$ , then circling once around the origin in positive sense without meeting the points $\pm 2πi$ , $\pm 4πi$ , ..., and eventually turning back to $+ ∞$ . 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>
   </math>

Contents