<math> MathML formula
Math notation written as MathML markup.
<math> is the root element of a MathML formula. Inside it go fractions (mfrac), roots (msqrt), superscripts (msup), numbers (mn), identifiers (mi) and operators (mo).
Every current browser renders MathML Core. Screen readers can read the formula properly, which an image of an equation never allows. display="block" centers a formula on its own line. For a lone x2 in running text, sup does the job.
Inline formulas are covered in the MathML section (opens in a new tab) of the HTML standard. For a single variable, the var element is enough.
Syntax
<math>
<mi>x</mi>
<mo>=</mo>
<mn>2</mn>
</math>When to use it
Fractions and roots on a homework help page, the quadratic formula in a lesson, a physics equation in an article, a matrix in a statistics tutorial: when the structure of a formula carries meaning, write it in <math>. It stays selectable text, stays sharp when zoomed, and assistive technology can read it.
A lone variable or a simple power in running text only needs var and sup. Pictures of formulas were the old workaround. They blur when you zoom and hide the math unless the alt text spells it all out. Lots of sites write LaTeX and have MathJax or KaTeX convert it, and both libraries can output MathML.
Browsers implement MathML Core, which drops several elements that older MathML 3 tutorials still use, mfenced and menclose among them. Browsers ignore those. Write brackets as <mo> elements. A base or exponent made of several parts needs an <mrow> around it, because msup takes exactly two children.
Attributes
| Attribute | What it does |
|---|---|
display | block for a formula on its own line, inline (default) inside text. |
Live example
Edit the code and watch the preview.
<p>One half is
<math>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</math>
and the area is
<math>
<mi>π</mi>
<msup>
<mi>r</mi>
<mn>2</mn>
</msup>
</math>.</p>More examples
Quadratic formula
A display formula with a fraction, a square root and a power in it. Every mrow bundles several parts into one child. The plus-minus and minus signs are numeric character references.
<math display="block">
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow><mn>2</mn><mi>a</mi></mrow>
</mfrac>
</math>Matrix with brackets
mtable, mtr and mtd build a 2 by 2 matrix. The square brackets are mo elements on either side of the table, and the browser stretches them to the matrix's full height.
<p>The identity matrix:</p>
<math display="block">
<mrow>
<mo>[</mo>
<mtable>
<mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr>
<mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr>
</mtable>
<mo>]</mo>
</mrow>
</math>Tip: Mark formulas up in MathML; skip the images.
Browser support
Firefox and Safari support MathML Core, and Chrome and Edge joined with version 109 in 2023. Every major browser engine now renders formulas natively. Spacing and fonts can still vary a little from browser to browser. The MathML support table (opens in a new tab) lists versions and known gaps.
Accessibility
NVDA, JAWS and VoiceOver can all read MathML as math, which beats an image of a formula by a wide margin. If an image is unavoidable, its alt text should give the formula in words. MathML Core (opens in a new tab) defines the element set.
Common mistakes
Wrong
<p>x<sup>2</sup> + y<sup>2</sup> = r<sup>2</sup></p>Right
<math><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><msup><mi>r</mi><mn>2</mn></msup></math>MathML carries the structure of the formula, so it displays and reads correctly.
Frequently asked questions
How do I write math formulas in HTML?
With MathML inside a <math> element. Identifiers go in <mi>, numbers in <mn> and operators in <mo>. Structures like <mfrac>, <msup> and <msqrt> build fractions, powers and roots. Chrome, Edge, Firefox and Safari all support MathML Core, so most formulas need no JavaScript library. Can I use (opens in a new tab) tracks browser support.
How do I display a formula on its own line?
Put display="block" on the <math> element. Math is inline by default: it sits within a line of text and uses a more compact layout. Block math gets its own centered line, and large operators such as sums and integrals render at full size.