Introduction to MathML – The Markup Language for Math

By . in Coding. Updated on .

MathML is a markup language that can be used to display mathematical notations. You can use MathML tags directly from HTML5. It is useful for when you wish to show more than simple notations of Math in your web pages, and it’s quite easy to use due to its simplicity and resemblance to HTML.

MathML has two types of markup; presentation (for layout) and content (for meaning). Since only the presentation markup is supported by browsers, that’s the only markup type that can be used with HTML. You can also use CSS and JavaScript on it just like you would on HTML.

Let’s take a look at MathML.

Understanding MathML

There’s a list of present MathML elements in the Mozilla Developer website. I’ve also listed the elements used in the examples at the end of this post for quick reference.

The top level element in MathML is the <math> element, When you write MathML code in the HTML, remember to put them inside the <math> tags.

<mi>,<mo>,<mn>,<ms> are the basic elements representing an identifier ,operator, number and string respectively. Note that all the MathML elements below start with the letter ‘m’.

Here are some simple examples.

How to Display Superscript & Subscript

The <msup> element is for displaying superscript. There’s an <msub> for subscripts.

<math>
    <msup>
        <mi>n</mi>
        <mn>7</mn>
    </msup>
</math>
MathML msup element example

How to Display Fractions

<math>
    <mfrac>
        <mn>7</mn>
        <mn>26</mn>
    </mfrac>
</math>
MathML mfrac element example

How to Display Root Integers

Here’s one more simple example for displaying root integers.

<math>
    <mroot>
        <mn><mo>-</mo>678</mn>
        <mn>5</mn>
    </mroot>
</math>
MathML mroot element example

For only square root, there’s <msqrt>.

Now let’s move on to more complex notations, the matrix.

How to Display a Matrix

To construct a matrix, we will need to have a table structure for rows and columns. For this, we use <mtable>, <mtr> and <mtd>.

Apart from that, we’ll use the <mo> tags to add the operators [ and ] around the matrix, and finally put them all inside the <mrow> element, an element that groups expressions.

Here’s the end result:

<math>
 <mrow>
  <mo> [ </mo>
  <mtable>
    <mtr>
      <mtd> <mn>0</mn> </mtd>
      <mtd> <mn>4</mn> </mtd>
      <mtd> <mn>10</mn> </mtd>
    </mtr>
    <mtr>
      <mtd> <mn>5</mn> </mtd>
      <mtd> <mn>2</mn> </mtd>
      <mtd> <mi>X</mi> </mtd>
    </mtr>
    <mtr>
      <mtd> <mn>9</mn> </mtd>
      <mtd> <mn>11</mn> </mtd>
      <mtd> <mn>1</mn> </mtd>
    </mtr>
  </mtable>
  <mo> ] </mo>
 </mrow>
</math>

Also, let’s throw in a bit of CSS to make that ‘X’ stand out in the matrix.

mi {
    color:red;
}
MathML matrix example

How to Display Integral Equations

Below is an example of a basic type of integral equation. The <mmultiscripts> is used to add the limits to the integral.

MathML integral example

Like HTML, MathML also has characters and entities, one of which is used in the example to show the Greek phi symbol. Here’s how to display the integral equation above:

<math>
    <mrow>
        <mrow>
            <mi>f</mi>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
        </mrow>
        <mo>=</mo>
        <mrow>
            <mmultiscripts>
                <mo>∫</mo>
                <mi>a</mi>
                <mi>b</mi>
            </mmultiscripts>
            <mrow>
                <mi>K</mi>
                <mo>(</mo>
                <mi>x</mi>
                <mo>,</mo>
                <mi>t</mi>
                <mo>)</mo>
            </mrow>
            <mrow>
                <mi>φ</mi>
                <mo>(</mo>
                <mi>t</mi>
                <mo>)</mo>
            </mrow>
            <mi>d</mi>
            <mi>t</mi>
        </mrow>
    </mrow>
</math>

For a list of MathML character entities, click here to find them on the W3C website.

MathML Attributes

Apart from attributes that are are the same as HTML’s (like id), MathML also has a set of their own attributes. The Mozilla Developer site has a collection of MathML attributes for your reference. For fallbacks, you can use the JavaScript library MathJax. If you need more tools, check out this link here.

I take my leave with this codepen containing all of the examples above, for your easy reference.

Reference List of MathML Elements

Elements Definition
<math> Top-level MathML element
<mi> Displays identifiers (variables,constants,function names)
<mn> Displays numeric literal
<mo> Displays operator
<ms> Shows string literal
<msup> Attaches a superscript to a base
<msub> Attaches a subscript to a base
<mfrac> Used to display fractions
<mroot> Displays radicals with indices
<msqrt> Displays square root
<mtable> Displays a table or matrix
<mtr> Row of <mtable>
<mtd> Column in <mtr>
<mrow> Groups sub-expressions
<mmultiscripts> Used to add superscript, subscript, presuperscript & presubscript
WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail