HTML5 - MathML

The HTML syntax of HTML5 allows for MathML elements to be used inside a document using <math>...</math> tags.

Most of the web browsers can display MathML tags. If your browser does not support MathML, then I would suggest you to use latest version of Firefox.

MathML Examples

Following is a valid HTML5 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>

This will produce following result –

a2 + b2 = c2

Using MathML Characters

Consider, following is the markup which makes use of the characters &InvisibleTimes; −

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

This would produce following result. If you are not able to see proper result likex2 + 4x + 4 = 0, then use Firefox 3.5 or higher version.

This will produce following result –

x 2 + 4  x + 4 = 0

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>

This will produce following result –

A = x y z w

This would produce following result. If you are not able to see proper result, then use Fire fox 3.5 or higher version.

MathML