HTML - MathML

HTML MathML (Mathematical Markup Language) is used to embed mathematical equations and chemical reaction equations into HTML document.

Mathematical Markup Language (MathML)

Mathematical Markup Language is a XML based markup language introduced in 2015.
It helps to represent complex mathematical formula in human readable format.
This representation also helps software to understand context of the equation.
To embed MathML elements inside a web page, we can use the HTML <math> tag.

HTML MathML Elements

The following table contains a list of MathML elements used in HTML:

Element	Description
<math>	It is the top level tag (root) of all MathML elements.
<mrow>	It indicates row of a given table or matrix.
<msqrt>	It displays square roots symbol in an expression.
<msub>	It is used for adding subscript in a given expression.
<msup>	It is used for adding superscript in a given expression.
<mo>	It represents operators such as equal to, comma and so on.
<mi>	It represents identifiers such as variable or constant.
<mtable>	It is used for creating table or matrix.
<mtr>	It is used for table row or matrix row.
<mtd>	It is used to enter data in a cell of a table or a matrix.

Purpose of HTML MathML

MathML is helpful to display formula in technical and mathematical webpages. This ensures clear math content in e-learning materials, scientific papers and complex algorithms.

MathML is only supported in Google Chrome and Mozilla Firefox browsers. Please make sure that your browser supports MathML before testing it.

Examples MathML in HTML

Following are some examples that illustrates how to use MathML elements in HTML.

Pythagorean theorem Using MathML

In this example, we will make Pythagorean Equation using HTML code.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Pythagorean theorem</title>
</head>
<body>
   <math>
      <mrow>
         <msup>
            <mi>a</mi>
            <mn>2</mn>
         </msup>

         <mo>+</mo>

         <msup>
            <mi>b</mi>
            <mn>2</mn>
         </msup>

         <mo>=</mo>

         <msup>
            <mi>c</mi>
            <mn>2</mn>
         </msup>
      </mrow>
   </math>
</body>
</html>

Quadratic Equation using MathML

In this example we will make a Quadratic Equation using HTML code.

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>
<body>
   <math>
      <mrow>
         <msup>
            <mi>x</mi>
            <mn>2</mn>
         </msup>
         
         <mo>+</mo>
         
         <mn>4</mn>
         <!-- Invisible times operator -->
         <mo>⁢</mo> 
         <mi>x</mi>
         
         <mo>+</mo>
         
         <mn>4</mn>
         
         <mo>=</mo>
         <mn>0</mn>
      </mrow>
   </math>
</body>
</html>

Make Matrix in MathML

Consider the following example which would be used to represent a simple 2x2 matrix:

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>
<body>
   <math>
      <mrow>
         <mi>A</mi>
         <mo>=</mo>
         <mfenced open="[" close="]">
            <mtable>
               <mtr>
                  <mtd><mi>x</mi></mtd>
                  <mtd><mi>y</mi></mtd>
               </mtr>

               <mtr>
                  <mtd><mi>z</mi></mtd>
                  <mtd><mi>w</mi></mtd>
               </mtr>
            </mtable>
         </mfenced>
      </mrow>
   </math>
</body>	
</html>

Redox Equation in MathML

Below is an example of a redox chemical equation using MathML.

<!DOCTYPE html>
<html>
<head>
   <title>MathML Examples</title>
</head>

<body>
      <math>
      <mrow>
         <msub>
            <mtext>Zn</mtext>
         </msub>
         <mo>+</mo>
         <msub>
            <mrow>
            <mtext>CuSO</mtext>
            <mn>4</mn>
            </mrow>
         </msub>
         
         <!-- Arrow Symbol -->
         <mo>→</mo>
         
         <msub>
            <mrow>
            <mtext>ZnSO</mtext>
            <mn>4</mn>
            </mrow>
         </msub>
         
         <mo>+</mo>
         
         <msub>
            <mtext>Cu</mtext>
         </msub>
      </mrow>
      </math>

</body>
</html>

Print Page