2025-10-02

MathML

Did you know there is a Markup Language specifically for mathematical notation? This Markup Language is called 'MathML'. The first time I heard about MathML was on the Pre-CSS Day organised this year by iO Digital, where Vadim Makeev (MDN Technical Writer) gave us some insights on MathML.

MathML doesn't only take care of how the mathematical notation looks like on the screen, it describes the mathematics that is being displayed which makes it accessible for screenreaders as well. MathML is baseline widely available (this means that MathML is supported by Safari, Firefox, Chrome/Edge).

Let's take a look at some mathematical notations below, created with MathML:

\frac{1}{3}

\sqrt{x} + \sqrt[3]{x}

x

There are a few things to remember when using MathML:

MathML is a format similar to SVG, but don't use MathML as a file format
MathML can be used within HTML
You don't style things in MathML
MathML won't scale like SVG does, you can't make it responsive

Example

If you would like to use MathML, you could do so by adding the `<math>` element within your HTML. Take a look at the code below on how to display a mathematical fraction:

<math>       
   <mfrac>          
       <mn>1</mn>          
       <mn>3</mn>        
   </mfrac>     
</math>

Important MathML elements

<math>	Use <math> as a container for all the MathML.
<mi>	This stands for 'math identifier' and is used for variables like x and y.
<mn>	Stands for 'math number' and is used for numbers.
<mo>	Stands for 'math operator', such as '+', '-' and '='.
<mfrac>	This is used for fractions, like in the code example above.
<msqrt>	Stands for 'math square root', and is used for square roots.
<mroot>	Stands for 'math root', and can be used for other roots than square roots.

Interesting sources

Go back to blogs