Copyright © tutorialspoint.com

# HTML5 - MathML Tutorial

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.

You can check W3 Specification for MathML at MathML 2.0 Specification.

# 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 would produce following result:

a 2 + b 2 = c 2

To learn above concept - Do Online Practice using Firefox 3.7 or higher version.

# 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 like x2 + 4x + 4 = 0, then use Firefox 3.5 or higer version.

x2 + 4x + 4 = 0

To learn above concept - Do Online Practice using Firefox 3.7 or higher version.

# 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 would produce following result. If you are not able to see proper result, then use Firefox 3.5 or higer version.

To learn above concept - Do Online Practice using Firefox 3.7 or higher version.

Copyright © tutorialspoint.com