<math>

Baseline 2023
Newly available

Since January 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Note: See the Authoring MathML page for tips to properly integrate MathML formulas in your web pages and the Examples page for more demos.

Attributes

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

display

This enumerated 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 with math-style set to normal.
  • inline, which means that this element will be displayed inside the current span of text and with math-style set to compact.

If not present, its default value is inline.

Accessibility

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

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>

Examples

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>

Technical summary

Specifications

Specification
MathML Core
# the-top-level-math-element

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
math
display

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

See also

  • HTML top-level element: <html>
  • SVG top-level element: <svg>