# Introduction to MathML – The Markup Language for Math

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.



#### How to Display Fractions

$<mfrac> <mn>7</mn> <mn>26</mn> </mfrac>$


#### How to Display Root Integers

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

$<mroot> <mn><mo>-</mo>678</mn> <mn>5</mn> </mroot>$


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:

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


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

mi {
color:red;
}


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

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:

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


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 [itex] Top-level MathML element  Displays identifiers (variables,constants,function names)  Displays numeric literal  Displays operator  Shows string literal  Attaches a superscript to a base  Attaches a subscript to a base  Used to display fractions  Displays radicals with indices  Displays square root  Displays a table or matrix  Row of   Column in   Groups sub-expressions  Used to add superscript, subscript, presuperscript & presubscript