Math in HTML

Format scientific documents on the web using MathML.

March 11, 2025

For a long time, it was very difficult to format scientific documents in HTML. While HTML has supported basic document formatting like headings, paragraphs, bold text, and italic text since the beginning—and more advanced semantic markup like articles and figures since HTML5, scientists and engineers have typically avoided math markup in HTML due to it's historically nonstandard nature and spotty support in browsers.

However, that's history. In fact, the mathematical markup language (or MathML) was included with HTML5 and has been standardized by ISO since 2015. Since then, all modern browsers support MathML formatting, including Chrome, Edge, Firefox, and Safari. I find Firefox provides the best looking output, especially for square roots, but they all do a good job. If you need to include equations and other mathematical expressions on the web, you can safely do so using MathML in 2025.

Let's get started with just a few basic elements in MathML. I find these elements cover my typical use cases for scientific documents that include equations:

Getting started

The top level or parent element for MathML is <math>. By default, this is an inline element, but you can add the optional display="block" attribute to format an expression in its own block.

You might be tempted to write out math expressions like you might in LaTeX or eqn, where you just write it and let the system figure out what's a number, what's an operator, and what's a symbol, and automatically format it for you. However, HTML is intended for online viewing, and that means that math expressions need to be made accessible to all users. MathML provides several elements to provide these accessibility hints:

<mn> for math numbers or any strictly numerical value such as 1 or 0.125
<mi> for math identifiers like variables or functions (such as sin) or constants (like π)
<mo> for math operators like + (addition) and ∑ (summation):

A simple example that demonstrates each of these elements is the equation to calculate the circumference of a circle. This includes identifiers like $C$ for the circumference and $r$ for the radius, the $=$ operator for equality, and the number 2:

<math display="block">
  <mi>C</mi> <mo>=</mo> <mn>2</mn> <mi>&pi;</mi> <mi>r</mi>
</math>

C = 2 π r

Superscripts and subscripts

Use <msub> to create a math subscript and <msup> to format a math superscript. This math formatting is used throughout all branches of mathematics and the sciences, such as an initial velocity like $v_{0}$ , or $x^{2}$ to indicate a squared value. Use both to enclose two elements: a number or identifier, and the item to use as a superscript or subscript.

The equation for the area of a circle demonstrates how to use a superscript for a squared value:

<math display="block">
  <mi>A</mi> <mo>=</mo> <mi>&pi;</mi> <msup><mi>r</mi><mn>2</mn></msup>
</math>

A = π r^{2}

A more intricate example is the equation for motion without acceleration. This uses the number 0 as a subscript on two variables to indicate the initial position $x_{0}$ and the initial velocity $v_{0}$ :

<math display="block">
  <mi>x</mi><mo>(</mo><mi>t</mi><mo>)</mo>
  <mo>=</mo> <msub><mi>x</mi><mn>0</mn></msub>
  <mo>+</mo> <msub><mi>v</mi><mn>0</mn></msub> <mi>t</mi>
</math>

x (t) = x_{0} + v_{0} t

To attach both a superscript and subscript to an item, use <msubsup>. As implied by the name, you should first provide the element, then the subscript, then the superscript. For example, you might type this to indicate the sum of squares over a set of numbers:

<math display="block">
  <mo>&Sum;</mo> <msubsup><mi>n</mi> <mi>i</mi> <mn>2</mn></msubsup>
</math>

\sum n_{i}^{2}

Fractions

The <mfrac> element formats math fractions. Like with <msub> and <msup>, you need to enclose two elements: the numerator and the denominator:

<math display="block">
  <mfrac><mi>N</mi><mi>D</mi></mfrac>
</math>

\frac{N}{D}

For example, let's update the above equation of motion to accommodate acceleration, such as the acceleration due to gravity. The classic way to format the 1/2 value in the acceleration component is with a fraction:

<math display="block">
  <mi>y</mi><mo>(</mo><mi>t</mi><mo>)</mo>
  <mo>=</mo> <msub><mi>y</mi><mn>0</mn></msub>
  <mo>+</mo> <msub><mi>v</mi><mn>0</mn></msub> <mi>t</mi>
  <mo>+</mo> <mfrac><mn>1</mn><mn>2</mn></mfrac> <mi>a</mi> <msup><mi>t</mi><mn>2</mn></msup>
</math>

y (t) = y_{0} + v_{0} t + \frac{1}{2} a t^{2}

If you need to enclose more than one element as the numerator or denominator, you need to group them with <mrow> as a math row collection. This is not literally a row, but a group of terms that should stay together. One example that benefits from a grouping is to the formula to add a list of numbers from 1 to $n$ . This requires several elements in the numerator portion, which can be collected as the first element in the fraction using <mrow> like this:

<math display="block">
  <mfrac>
    <mrow><mi>n</mi> <mo>(</mo> <mi>n</mi><mo>+</mo><mn>1</mn> <mo>)</mo></mrow>
    <mn>2</mn>
  </mfrac>
</math>

\frac{n (n + 1)}{2}

For good accessibility, you should also use <mrow> to group related elements together in a math expression, such as items inside parentheses. Here's the same equation again, using <mrow> for the part inside the parentheses:

<math display="block">
  <mfrac>
    <mrow><mi>n</mi> <mo>(</mo> <mrow><mi>n</mi><mo>+</mo><mn>1</mn></mrow> <mo>)</mo></mrow>
    <mn>2</mn>
  </mfrac>
</math>

\frac{n (n + 1)}{2}

Over and under elements

Sometimes, a math expression requires a special symbol over or under a value Use <mover> to place a symbol over another symbol, and <munder> to place one symbol under another. As with <msub> or <msup>, this takes two elements: the value, and the symbol that to place under or over it. This allows you to write vectors with traditional "arrow" notation like $\vec{A}$ or using "underbar" style like $\underline{A}$ .

We can use the "overbar" to format another example, where $\overline{x}$ represents the mean value in a set of numbers:

<math display="block">
  <mover><mi>x</mi><mo>&OverBar;</mo></mover> <mo>=</mo>
  <mfrac>
    <mrow><mo>&Sum;</mo> <msub><mi>x</mi><mi>i</mi></msub></mrow>
    <mi>n</mi>
  </mfrac>
</math>

\overline{x} = \frac{\sum x_{i}}{n}

For more detailed formatting, use <munderover> to place one symbol under and another symbol over an element at the same time. For example, you might use "under" and "over" formatting to add boundaries on a summation:

<math display="block">
  <munderover><mo>&Sum;</mo> <mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow> <mi>n</mi></munderover>
  <msub><mi>x</mi><mi>i</mi></msub>
</math>

\sum_{i = 1}^{n} x_{i}

The browser can render <munderover> appropriately to make the best use of space, such as in this more detailed example to calculate the mean:

<math display="block">
  <mover><mi>x</mi><mo>&OverBar;</mo></mover> <mo>=</mo>
  <mfrac>
    <mrow><munderover><mo>&Sum;</mo> <mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow> <mi>n</mi></munderover> <msub><mi>x</mi><mi>i</mi></msub></mrow>
    <mi>n</mi>
  </mfrac>
</math>

\overline{x} = \frac{\sum_{i = 1}^{n} x_{i}}{n}

Square roots and other roots

Square roots are a common thing in mathematics, so it's really easy to format these values with MathML. Use the <msqrt> element for the math square root, like <msqrt><mn>2</mn></msqrt> to format the square root of 2 as $\sqrt{2}$ .

The web browser will change the size of the square root to accommodate its contents, which allows for very intricate expressions. One detailed example is this equation to calculate the standard deviation of a set of numbers, using $μ$ as an alternative to $\overline{x}$ :

<math display="block">
  <mi>&sigma;</mi> <mo>=</mo>
  <msqrt>
    <mfrac>
      <mrow>
        <mo>&Sum;</mo>
        <msup>
          <mrow>
            <mo>(</mo>
            <mrow><msub><mi>x</mi><mi>i</mi></msub> <mo>-</mo> <mi>&mu;</mi></mrow>
            <mo>)</mo>
          </mrow>
          <mn>2</mn>
        </msup>
      </mrow>
      <mi>n</mi>
    </mfrac>
  </msqrt>
</math>

σ = \sqrt{\frac{\sum {(x_{i} - μ)}^{2}}{n}}

To format an arbitrary math root, use <mroot>. Like <mfrac>, this should enclose two elements: the value inside the root, and the root value. Because the root value will render in a much smaller size, I recommend formatting these expressions as a block, such as this example for the cube root of 8:

<math display="block">
  <mroot><mn>8</mn> <mn>3</mn></mroot> <mo>=</mo> <mn>2</mn>
</math>

\sqrt[3]{8} = 2

Learn more

With MathML, it's finally possible for technical writers to format scientific documents that include equations and other mathematical expressions. This brief tutorial demonstrates the features I find most useful for documents that display math.

But there's more you can do with MathML to suit all kinds of special use cases. For example, you can add LaTeX notation as a "fallback" annotation, or include extra space between specific elements for additional clarity. For a more detailed reference of these and other MathML features, refer to the full description of the language at Mozilla's MathML Reference on MDN.

Jim Hall is an open source software advocate and technical writer. At work, Jim is CEO of Hallmentum, an IT executive consulting company that provides hands-on IT Leadership training, workshops, and coaching.