Introduction to MathML

Test your browser

The following should look like the quadratic formula:

x=-b ± b2 - 4ac2a

If it just looks like a single row of letters and numbers, MathML is not supported. Upgrade to a browser that does support it, such as Firefox or Safari.

Tokens

The three tokens you will use most are <mi>, <mo> and <mn>. They represent identifiers, operators and numbers.

<math><mi>x</mi> <mo>+</mo> <mn>5</mn></math>
x + 5

You can use special symbols as operators by writing out their entities, such as &plusmn; (±). You may also insert text into an expression using the <mtext> token.

<math><mtext>This is the speed of light:</mtext> <mi>c</mi> <mo>=</mo> <mn>299792458</mn> <mo rspace="thickmathspace">&InvisibleTimes;</mo> <mi mathvariant="normal">m</mi><mo>/</mo><mi mathvariant="normal">s</mi></math>
This is the speed of light: c = 299792458 m/s

The mathvariant property can change the look of a token. It is "normal" by default, except in <mi>, where it is "italic". We override it in this example, because units are written upright. For symbols that are spoken but sometimes aren't written, such as the multiplication sign (&InvisibleTimes;) or the comma in subscripts (&InvisibleComma;), we use special entities. This is to ensure correct pronunciation by screen readers. Since InvisibleTimes has no width, we use rspace to add a space to the right of it.

Layout Elements

Layout elements take a number of arguments, either tokens or other layout elements, and lay them out in a specific way.

<mrow>

Lays its arguments out vertically. If a layout element only takes one argument, it's implicitly treated as one big mrow. Its use is like a block statement in programming languages.

<mfenced>

Takes any number of arguments. Draws braces around its content and separates each argument with a comma. The advantage over writing <mo>(</mo> is that the braces grow to fit their content. You can choose which braces and separator to use with the open, close, and separators attributes.

<mfrac>

Takes two arguments, dividend and divisor.

<msup> / <msub> / <msubsup>

Takes two arguments, one for the token being super/subscripted and the super/subscript itself.

<math><mfrac><mn>1</mn><mrow><mn>2</mn><mo>&InvisibleTimes;</mo><mi>x</mi></mrow></mfrac> <mo>=</mo> <msup><mfenced><mrow><mn>2</mn><mo>&InvisibleTimes;</mo><mi>x</mi></mrow></mfenced><mn>-1</mn></msup></math>
12x = 2x-1

<msubsup> is a combination of <msub> and <msup>, with the first argument being the token being sub and superscripted, then the subscript and finally the superscript.

<mmultiscripts>

Works similar to <msubsup>, but prescripts can be added after the separator <mprescripts/>. Takes either two or five arguments depending om the presence of the separator. Use <none/> to omit an argument.

<math><mmultiscripts><mtext>C</mtext><mn>2</mn><none/><mprescripts/><mn>12</mn><mn>6</mn></mmultiscripts></math>
C2126

<mover> / <munder> / <munderover>

Works similarly to the sup/sub elements, but places its arguments directly above and/or below the base.

<math><munderover><mo>&Sigma;</mo><mrow><mi>x</mi><mo>=</mo><mn>1</mn></mrow><mn>6</mn></munderover><msup><mi>x</mi><mn>2</mn></msup> <mo>=</mo> <mn>91</mn></math>
Σx=16x2 = 91

Symbols stretch to be as wide as the argument it's placed under.

<math><mover><mo>&rarr;</mo><mtext>oxidation</mtext></mover></math>
oxidation

<msqrt> / <mroot>

<msqrt> takes a single argument, while <mroot> takes the index as a second argument.

<math><mroot><mn>27</mn><mn>3</mn></mroot></math>
273

<mtable> / <mtr> / <mtd>

<mtable> is analogous to HTML's <table> element. It contains rows (<mtr>) which contain cells (<mtd>).

<math><mfenced><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>2</mn></mtd></mtr><mtr><mtd><mn>3</mn></mtd><mtd><mn>4</mn></mtd></mtr></mtable></mfenced></math>
1234

Interactivity

The <maction> element can add some interactivity to your expressions. It isn't required by the spec, so browser support can be lacking. Consider modifying the DOM with JavaScript instead to add more involved interactivity.

toggle

Cycles through its arguments on click. The selection paramater determines which of its arguments should be displayed initially.

<math><maction actiontype="toggle" selection="2"><mi>x</mi><mi>y</mi><mi>z</mi></maction></math>
xyz

tooltip

Shows some text on hover. Since tooltips usually can only cotain text, it is recommended to use only <mtext> as the second argument.

<math><mi>z</mi><mo>=</mo><maction actiontype="tooltip"><mi>r</mi><mtext>radius</mtext></maction><mo>&InvisibleTimes;</mo><mi>cos</mi><mo>&ApplyFunction;</mo><maction actiontype="tooltip"><mi>&theta;</mi><mtext>inclination</mtext></maction></math>
z=rradiuscosθinclination

statusline

Similar to tooltip, but displays in the browser's status bar.

z=rradiuscosθinclination

Hyperlink

Using the href attribute, you can link math elements.

<math><mi>y</mi><mo>=</mo><mn>2</mn><mo>&InvisibleTimes;</mo><mi href="#xdefinition">x</mi></math>
y=2x

Further Reading

The spec is the ultimate reference guide for MathML. You may also want to visit the homepage of MathML.