<math>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2023.

The<math>MathML element is the top-level MathML element, used to write a single mathematical formula. It can be placed in HTML content whereflow content is permitted.

Note:See theAuthoring MathML page for tips to properly integrate MathML formulas in your web pages and theGuides page for more demos.

Attributes

This element's attributes include theglobal MathML attributes as well as the following attribute:

display

Thisenumerated attribute specifies how the enclosed MathML markup should be rendered. It can have one of the following values:

block, which means that this element will be displayed in its own block outside the current span of text and withmath-style set tonormal.
inline, which means that this element will be displayed inside the current span of text and withmath-style set tocompact.

If not present, its default value isinline.

Accessibility

The<math> element has an implicitmath ARIA role. Assistive technologies can use this role to identify the content as a mathematical expression and convey it to users.

html,body {  height: 100%;}body {  display: grid;  place-items: center;  font-size: 1.5rem;}

For example, screen readers will represent the following quadratic formula similar to:

x equals fraction start, negative b plus or minus square root of b squared minus 4 a c, end of root, over 2 a, end of fraction, maths

Markup for the quadratic formula

html

<math display="block">  <mrow>    <mi>x</mi>    <mo>=</mo>    <mfrac>      <mrow>        <mrow>          <mo>−</mo>          <mi>b</mi>        </mrow>        <mo>±</mo>        <msqrt>          <mrow>            <msup>              <mi>b</mi>              <mn>2</mn>            </msup>            <mo>−</mo>            <mrow>              <mn>4</mn>              <mo>⁢</mo>              <mi>a</mi>              <mo>⁢</mo>              <mi>c</mi>            </mrow>          </mrow>        </msqrt>      </mrow>      <mrow>        <mn>2</mn>        <mo>⁢</mo>        <mi>a</mi>      </mrow>    </mfrac>  </mrow></math>

This example contains two MathML formula. The first one is rendered in its own centered block, taking as much space as needed. The second one is rendered inside the paragraph of text, with reduced size and spacing in order to minimize its height.

html

<p>  The infinite sum  <math display="block">    <mrow>      <munderover>        <mo>∑</mo>        <mrow>          <mi>n</mi>          <mo>=</mo>          <mn>1</mn>        </mrow>        <mrow>          <mo>+</mo>          <mn>∞</mn>        </mrow>      </munderover>      <mfrac>        <mn>1</mn>        <msup>          <mi>n</mi>          <mn>2</mn>        </msup>      </mfrac>    </mrow>  </math>  is equal to the real number  <math display="inline">    <mfrac>      <msup>        <mi>π</mi>        <mn>2</mn>      </msup>      <mn>6</mn>    </mfrac>  </math>  .</p>