MathML – The Markup Language For Math Notations

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

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

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.

Understanding MathML

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

Here are some simple examples.

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.

How to Display Superscript & Subscript

Let’s take a look at 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.

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.

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.

How to Display a Matrix

<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’.

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.

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

<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.

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

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>&Integral;</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>&phi;</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

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

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 { 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.

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

Leave a Reply