HTML5 MathML

HTML5 can use MathML elements in documents, the corresponding tags are <math>...</math> .

MathML is Mathematical Markup Language, a markup language based on XML (a subset of Standard Universal Markup Language) for writing mathematical symbols and formulas on the Internet.

Most browsers support MathML tags. If your browser does not support this tag, you can use the latest version of Firefox or Safari to view it.


MathML instance

Here is a simple MathML example:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>HTML5 Tutorial</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>

The result displayed as follows:

The following examples add some operators:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>HTML5 MathML</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>

Result

The following example is a 2×2 matrix, which can be viewed in Firefox 3.5+:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>HTML5 MathML</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>

Result