• Home
• Foundations
Thomas A. Alspaugh
MathML

# Introduction

MathML is a language for expressing mathematical notations, both their presentation (how a notation looks on a page) and their semantics or content (what a notation means).

This page presents an overview of what I have used from presentation MathML version 3.0: of the 39 elements, and a few of their attributes. For details, additional elements, and additional attributes for the elements presented here, or for content MathML, see the W3C definition [MathML 3.0]. Each discussion in this document of an element m ends with a link to m's section in the definition (→W3C definition of m).

# Organization and coverage

MathML, like other recursively-defined languages, contains compound elements which contain other elements, and tokens which do not.

Overview of MathML constructs
Group Function Element Examples
Token
elements
Identifier mi $x$ <mi>x</mi>
$\pi$ <mi>π</mi>
$\mathrm{sin}$ <mi>sin</mi>
Number mn $123$ <mn>123</mn>
Operator, fence,
separator
mo $+$ <mo>+</mo>
$\left($ <mo>(</mo>
$,$ <mo>,</mo>
Text mtext $\text{Thus}$ <mtext>Thus</mtext>
Space mspace $\phantom{\rule{1em}{0ex}}$ <mspace width='1em' />
Compound
elements
Horizontal expression mrow $1+2$
```<mrow>
<mn>1</mn><mo>+</mo> <mn>2</mn>
</mrow>```
Fenced and separated list mfenced $\left(1,2\right)$
```<mfenced>
<mn>1</mn><mn>2</mn>
</mfenced>```
Fraction mfrac $\frac{1}{2}$ <mfrac><mn>1</mn><mn>2</mn></mfrac>
Sub-, superscript msub ${a}_{1}$ <msub><mi>a</mi><mn>1</mn></msub>
msup ${b}^{2}$ <msup><mi>b</mi><mn>2</mn></msup>
msubsup ${c}_{3}^{4}$
```<msubsup>
<mi>c</mi><mn>3</mn><mn>4</mn>
</msubsup>```
Radical msqrt $\sqrt{3}$ <msqrt><mn>3</mn></msqrt>
mroot $\sqrt[3]{4}$ <mroot><mn>4</mn><mn>3</mn></mroot>
Tables and matrices mtable $\left(\begin{array}{cc}2& -1\\ 1& 0\end{array}\right)$ $\begin{array}{ccc}a& =& uv\\ b& =& {u}^{2}-{v}^{2}\end{array}$ examples
mtr
mtd
Top-level element math

The following token elements are not discussed here: maction, maligngroup, malignmark, mglyph1, ms.

Token element mo is discussed here but not its use for mathematical accents.

The following compound elements are not discussed here: menclose, mlabeledtr, mlongdiv, mmultiscripts, mpadded, mphantom, mprescripts, mscarries, mscarry, msgroup, msline, mstack, mstyle, munder, mover, munderover, none.

Note that some of the elements not discussed here are not supported by most or in some cases any browsers at this writing (2019), or are poorly supported.

The namespace for MathML is http://www.w3.org/1998/Math/MathML.

# The [itex] element

All MathML must be within a [itex] element. (To save space, many of this page's examples do not show it.)

A [itex] element may not be contained within another [itex] element.

The [itex] element takes several attributes (see the W3C definition of math for specifics).

Attribute Values Effect Default
display 'block'
'inline'
Displays its contents' presentation as a block or inline 'inline'

The [itex] element does not take the ordinary HTML attributes such as class and style.

# Token elements

## Identifiers:mi

<mi>S</mi> presents identifier $S$, which can be a single letter or other character or a sequence of them.

### Not obvious

Function names like $\mathrm{sin}$ should be presented with mi. (See the function application operator.)

Symbolic constants should be presented with mi; here are some examples:

Sym. UTF-8 for it In MathML
Oct &# Hex &#x
$\pi$ &#960; &#x3C0; <mi> &pi; </mi>
$e$ &#8519; &#x2147; <mi> &#8519;<!--DOUBLE-STRUCK ITALIC SMALL E--> </mi>
$i$ &#8520; &#x2148; <mi> &#8520;<!--DOUBLE-STRUCK ITALIC SMALL I--> </mi>
$\dots$ &#8230; &#x2026; <mi> &hellip; </mi>

A horizontal ellipsis as an element in a list should be presented with mi.

## Numbers:mn

<mn>12</mn> presents the number $12$.

## Operators, fences, and separators:mo

According to the W3C specification, mo is used for so many kinds of things because operators required sophisticated rendering and it was too tempting to reuse mo for other things that needed similar sophistication, namely fences, separators, and (not discussed here) mathematical accents.

Operator In MathML
$-$ <mo>-</mo>
$>$ <mo>&gt;</mo>
$\ge$ <mo>&ge;</mo>
$=>$ <mo>=&gt;</mo>
$\sum$ <mo>&#8721;</mo>
$.NOT.$ <mo>.NOT.</mo>

### Operators

<mo>o</mo> presents operator o, of one or more characters, with appropriate spacing, font size, etc.

### Not obvious

• mo is not used for functions, such as $\mathrm{sin}$ and $\mathrm{cos}$ (see the function application operator and mi).
• The function application operator is an invisible character signifying the application of a named function (like $\mathrm{sin}$ or $\mathrm{cos}$) to an operand. The function's name is presented with mi.
$\mathrm{tan}x$ :
```  [itex]
<mi>tan</mi><mo>&ApplyFunction;</mo><mi>x</mi>
[/itex]```
• The invisible times operator is an invisible character signifying the multiplication of two side-by-side factors.
$ab$ :
```  [itex]
<mi>a</mi><mo>&InvisibleTimes;</mo><mi>a</mi>
[/itex]```
• The invisible plus operator is an invisible character signifying the addition of two side-by-side addends, as in a mixed-fraction number.
$1⁤\frac{2}{3}$ :
```  [itex]
<mn>1</mn> <mo>&#8292;<!--INVISIBLE PLUS--></mo>
<mfrac><mn>2</mn><mn>3</mn></mfrac>
[/itex]```
Sym. utf-8 for it In MathML
Oct &# Hex &#x
function
application
&#8289; &#x2061; <mo>&ApplyFunction;</mo>
<mo>&af;</mo>
invisible
times
&#8290; &#x2062; <mo>&InvisibleTimes;</mo>
<mo>&it;</mo>
invisible
plus
&#8292; &#x2064; <mo>&#8292;<!--INVISIBLE PLUS--></mo>

### Fences

mo also presents fences such as ( and ).

$\left(a+b\right)$ using mrow for subexpression $a+b$:
```  [itex]
<mo>(</mo>
<mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow>
<mo>)</mo>
[/itex]```

Note that $\left(a+b\right)$ may be equivalently presented using mfenced:

The fence='true' attribute should be given for fences that are not single ‘ ’ or double “ ” quotes, parentheses ( ), square brackets [ ], curly braces { }, absolute value bars | |, or any of about four dozen more listed in MathML's operator dictionary.

### Separators

mo also presents separators such as commas.

#### Not obvious

The separator='true' attribute should be given for any separator other than comma, semicolon, or the invisible separator (&InvisibleComma;); see MathML's operator dictionary.

Sym. utf-8 for it In MathML
Oct &# Hex &#x
invisible separator
(invisible comma)
&#8291; &#x2063; <mo>&InvisibleComma;</mo>
<mo>&ic;</mo>
${a}_{1⁣2}$ as for an array element in the first row and second column, presented using msub and mrow:
```  [itex]
<msub>
<mi>a</mi>
<mrow>
<mn>1</mn>
<mo>&InvisibleComma:</mo>
<mn>2</mn>
</mrow>
</msub>
[/itex]```

## Text:mtext

<mtext>Commentary text</mtext> presents text $\text{Commentary text}$.

## Space:mspace

<mspace width='1em' /> presents 1em of whitespace $\phantom{\rule{1em}{0ex}}$.

Widths may also be given in units of px, cm, mm, pt, and several others.

# Compound elements

Compound elements group mathematical subexpressions in useful ways.

## Horizontally-grouped subexpressions:mrow

An mrow element groups its contents in a horizontal row, spaced appropriately as determined by what its contents are.

An mrow may contain other mrows (or other compound elements), and in fact often should. Each subexpression within an mrow should be contained in its own nested mrow. Each operator should be placed in its own mrow along with its operand(s), with the exception that a sequence of operators of the same precedence2 and their operands may be placed in a single mrow (for example, addition and subtraction may share an mrow, or multiplication and division, but not addition and multiplication).

$a\left(b+c\right)=ab+ac$

Each of these is a subexpression and should be in its own mrow:

• $b+c$
• $\left(b+c\right)$
• $a\left(b+c\right)$
• $ab$
• $ac$
• $ab+ac$
MathML

Several other MathML elements present their contents as if enclosed in an mrow:

and others not covered by this web page but described in the W3C definition §3.1.3.2.

## Horizontally-grouped subexpressions inside a pair of fences and separated by commas or other separators:mfenced

An mfenced element groups its contents in a horizontal row, separated by commas and enclosed in parentheses.

Different separators (or none) and different fences (or none) may be specified using attributes. With no separators and no fences, mfenced has the same effect as mrow.

Attribute Value type Effect of its value Default
open String The opening fence (
close String The closing fence )
separators String The separator character(s); if more than one is given, they are used in sequence ,

$\left(a,b,c\right)$ [itex]<mfenced><mi>a</mi><mi>b</mi><mi>c</mi></mfenced>[/itex]

$\left[a:b,c\right]$
```[itex]
<mfenced open='[' close=']' separators=':,'>
<mi>a</mi><mi>b</mi><mi>c</mi>
</mfenced>
[/itex]```
$\mathrm{max}\left(d,e,f\right)$
```[itex]
<mi>max</mi>
<mo>&#8289;<!--function application--></mo>
<mfenced>
<mi>d</mi><mi>e</mi><mi>f</mi>
</mfenced>
[/itex]```

## Fractions:mfrac

<mfrac>ND</mfrac> presents the fraction with numerator N and denominator D.

The fraction is presented with a horizontal fraction bar, or with a slanted fraction bar if the attribute bevelled='true' is given.

$\frac{\pi }{2}$ [itex]<mfrac><mi>&#960;<!--SMALL PI--></mi><mn>2</mn></mfrac>[/itex]

$\frac{1}{b+2}$
```  [itex]
<mfrac>
<mn>1</mn>
<mrow><mi>b</mi><mo>+</mo><mn>2</mn></mrow>
</mfrac>
[/itex]```
$1}{b+2}$
```  [itex]
<mfrac bevelled='true'>
<mn>1</mn>
<mrow><mi>b</mi><mo>+</mo><mn>2</mn></mrow>
</mfrac>
[/itex]```

## Sub- and superscripts:msub, msup, msubsup

### Subscripts:msub

<msub>EB</msub> presents subexpression E with subscript B.

${a}_{1}$ [itex]<msub><mi>a</mi> <mn>1</mn></msub>[/itex]

### Superscripts:msup

<msub>EP</msub> presents subexpression E with superscript P.

${b}^{2d}$
```  [itex]
<msup>
<mi>b</mi>
<mrow>
<mn>2</mn>
<mo>&InvisibleTimes#59</mo>
<mi>d</mi>
</mrow>
</msup>
[/itex]```

### Both sub- and superscripts:msubsup

<msubsup>EBP</msubsup> presents subexpression E with subscript B and superscript P.

${c}_{3}^{4}$
```  [itex]
<msubsup>
<mi>c</mi>
<mn>3</mn>
<mn>4</mn>
</msubsup>
[/itex]```

### Square roots:msqrt

<msqrt>E</msqrt> presents the square root of subexpression E.

$\sqrt{{b}^{2}-4ac}$
MathML

### Roots in general:mroot

<mroot>EN</mroot> presents the Nth root of subexpression E.

$\sqrt[4]{3}$ [itex]<mroot><mn>3</mn><mn>4</mn></mroot>[/itex]

## Tables and matrices:mtable, mtr, mtd

The mtable element presents a table, a matrix, or subexpressions whose layout can be specified in tabular form.

Analogous to an HTML table, an mtable element contains one or more mtr elements presenting the table's rows; each mtr element contains one or more mtd elements presenting the table's cells.

$\left(\begin{array}{cc}2& -1\\ 1& 0\end{array}\right)$
```  [itex]
<mfenced>
<mtable>
<mtr><mtd>2</mtd><mtd>-1</mtd></mtr>
<mtr><mtd>1</mtd><mtd>0</mtd></mtr>
</mtable>
</mfenced>
[/itex]```
$\begin{array}{ccc}a& =& uv\\ b& =& {u}^{2}-{v}^{2}\end{array}$
```  [itex]
<mtable side='right'>
<mtr>
<mtd><mtext>(1)</mtext></mtd>
<mtd><mi>a</mi></mtd>
<mtd><mo>=</mo></mtd>
<mtd>
<mrow>
<mi>u</mi>
<mo>&InvisibleTimes#59
</mo><mi>v</mi>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd><mi>b</mi></mtd>
<mtd><mo>=</mo></mtd>
<mtd>
<mrow>
<msup><mi>u</mi><mn>2</mn></msup>
<mo>-</mo>
<msup><mi>v</mi><mn>2</mn></msup>
</mrow>
</mtd>
</mtr>
</mtable>
[/itex]```

# Common attributes

## Of any element

Attribute Value type Effect of its value Default
class String Associates the style class(es) with the element none
style String Associates the style information with the element none
href URI Makes the element a hyperlink none

See [MathML 3.0] Using CSS with MathML to use class or style intelligently.

Elements also accept the id and xref attributes (for cross-referencing presentation and content elements), not discussed here.

## Of any presentation element

Attribute Value type Effect of its value Default
mathcolor color Sets the element's color inherited
mathbackgroundcolor color Sets the element's background color transparent

Colors may be #RGB, #RRGGBB, or an HTML color name.

## Of any token element

Attribute Value type Effect of its value Default
mathvariant normal, bold, italic, double-struck, script, sans-serif, twelve others Sets the element's font type normal (except for mi)
mathsize small normal big length Sets the element's size inherited

Token elements also accept the dir attribute, not discussed here.

# Notes

1. MathML allows mglyph, which presents a nonstandard character using an image, to appear in mi, mn, mo, and mtext elements while still classifying them as token elements.
2. The precedence of two operators expresses which of them binds more tightly and thus which one is performed first during evaluation of an expression containing them. For example, multiplication is said to bind more tightly than addition, so the expression

$2×3+4×5$

is evaluated in the sequence multiplications then addition

$2×3+4×5=\left(2×3\right)+\left(4×5\right)=6+20=26$

$2×3+4×5\ne 2×\left(3+4\right)×5=2×7×5=70$

In contrast, addition and subtraction are said to bind with equal tightness. In such cases the operations are typically performed left-to-right, so that

Precedence Operators
20 ( )
40 ,
invisible comma
190
200
230 ∀, ∃
240 ∈, ⊂, ⊃
241
242
243 >
245 <
255
260 =
265 ∙ /
275 − +
390 invisible times
880 invisible plus

$1+2-3+4$

is evaluated

$1+2-3+4=3-3+4=0+4=4$

Operations may be listed in a total order by precedence, that is to say, for any two operators a and b, either a binds more tightly than b, b binds more tightly than a, or a and b bind equally tightly. Consequently the precedence of each in a set of operators is expressed as an integer. By custom, smaller integers mean tighter binding. and larger, less-tight.

The operator precedences for MathML are listed in a very, very long table, from which a dozen or so common operators have been drawn and appear in the brief table at right. (I don't know why multiplication seems to have been given two different precedences, one for ∙ and the other for invisible times.)

# References

Mathematical Markup Language (MathML) Version 3.0 2nd Edition. W3C Recommendation 10 April 2014.