Français

<math>

Embed a mathematical formula in HTML

— 1 min read

  • MathML
  • accessibility
  • semantics

<math> — The mathematical formula

The <math> element is the root container for MathML content, like <svg> is for vector graphics. All modern browsers support it natively.

When to use it

You want to display a mathematical formula on your page: an equation, an expression with fractions, exponents, or roots. You want the formula to be readable by assistive technologies, not a silent image.

What you gain

Accessibility: screen readers read MathML formulas in a structured way. An image of an equation with an approximate alt will never replace a navigable formula.

Code example

<p>The quadratic formula:</p>
<math display="block">
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>-</mo><mi>b</mi>
        <mo>&#xB1;</mo>
        <msqrt>
          <mrow>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>-</mo>
            <mn>4</mn><mi>a</mi><mi>c</mi>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn><mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

Further reading