HTML5 MathML
HTML5 MathML Tags
Presentation MathML provides a set of tags that build up mathematical layout - rows, fractions, roots, scripts and tables. The tables below list the elements you place inside the <math> root, and the example shows several working together.
Token Elements (leaf content)
| Tag | Description |
|---|---|
| <mi> | An identifier such as a variable or function name (italic by default). |
| <mn> | A numeric literal. |
| <mo> | An operator, fence or separator such as +, =, ( or ). |
| <mtext> | Ordinary text inside a formula. |
| <ms> | A string literal, rendered inside quotes. |
| <mspace> | Blank space of a given width or height. |
Layout and Script Elements
| Tag | Description |
|---|---|
| <mrow> | Groups sub-expressions horizontally as a single unit. |
| <mfrac> | Builds a fraction from a numerator and denominator. |
| <msqrt> | Draws a square root over its contents. |
| <mroot> | Draws an nth root with an index. |
| <msup> | Attaches a superscript (exponent). |
| <msub> | Attaches a subscript. |
| <msubsup> | Attaches both a subscript and a superscript. |
| <mover> | Places an accent or object over an expression. |
| <munder> | Places an object under an expression. |
| <mtable> | Creates a table or matrix layout of rows and cells. |
Example
This document combines a fraction, an exponent and a square root to render Pythagoras' theorem solved for the hypotenuse.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathML Tags</title>
</head>
<body>
<math display="block">
<mrow>
<mi>c</mi>
<mo>=</mo>
<msqrt>
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
</mrow>
</msqrt>
</mrow>
</math>
</body>
</html>💡
Wrap multi-part numerators, denominators and radicands in <mrow> so the browser treats them as one group and spaces them correctly.