HTML - MathML

MathML in HTML

The term MathML stands for Mathematical Markup Language. It was introduced in the year 2015 for embedding mathematical notation and chemical reaction equation into an HTML document. To embed MathML elements inside a web page, we use the HTML <math> tag.

MathML elements used in HTML

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

S.No. Element & Description
1

<math>

It is the top level tag (root) of all MathML elements.
2

<mrow>

It indicates row of a given table or matrix.
3

<msqrt>

It displays square roots of a given expression.
4

<msub>

It is used for adding subscript to a given expression.
5

<msup>

It is used for adding superscript to a given expression.
6

<mo>

It represents operators such as equal to, comma and so on.
7

<mi>

It represents identifiers such as variable or constant.
8

<mtable>

It is used for creating table or matrix.
9

<mtr>

It is used for table row or matrix row.
10

<mtd>

It is used to enter data in a cell of a table or a matrix.

Example

Following is a valid HTML document with MathML −

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Pythagorean theorem</title>
</head>
<body>
   <math xmlns="http://www.w3.org/1998/Math/MathML">
      <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>

Using MathML Characters

Consider, following is the markup which makes use of the characters ⁢ −

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>MathML Examples</title>
</head>
<body>
   <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
         <mrow>
            <msup>
               <mi>x</mi>
               <mn>2</mn>
            </msup>
            <mo>+</mo>
            <mrow>
               <mn>4</mn>
               <mo> </mo>
               <mi>x</mi>
            </mrow>
            <mo>+</mo>
            <mn>4</mn>
         </mrow>
         <mo>=</mo>
         <mn>0</mn>
      </mrow>
   </math>
</body>
</html>

Matrix Presentation Examples

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

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>MathML Examples</title>
</head>
<body>
   <math xmlns="http://www.w3.org/1998/Math/MathML">
      <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>
Advertisements