Free Tutorials

HTML5 - MathML

HTML5 - MathML
General

HTML5 - MathML

The new HTML5 syntax allows for MathML elements to be made use of inside an HTML document using the <math>...</math> tags.

Many web browser can display the <math> tag. If your browser does not have support for MathML, then we would suggest  that you use the newest version of Firefox.

MathML Examples

The example below 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> 

Using MathML Characters

Look at the following, this 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> 

If cannot see a proper result like x2 + 4x + 4 = 0, then make use of Firefox 3.5 or a higher version.

Matrix Presentation Examples

Look at the following example that would be used to represent a very 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>