HTML5 MathML


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

MathML is a mathematical markup language, a markup language based on XML (a subset of standard universal markup language), used to write mathematical symbols and formulas on the Internet.

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

MathML Example

Is a simple MathML example:

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TutorialFish (tutorialfish.com)</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>

 Try It! 

The result is showing as follows:

image.png


The following example adds some operators:

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TutorialFish (TutorialFish.com)</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>

 Try It! 

The result is showing as follows:

image.png


The following example is a 2×2 matrix, and the effect can be seen in Firefox 3.5 and above:

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TutorialFish (tutorialfish.com)</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>

 Try It! 

The result is showing as follows:

image.png