HTML5 - MathML


Advertisements


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 −

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 higher version.

This will produce following result −

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 −

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

MathML