Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder

Outlines

MathML Examples

Using MathML Characters

Matrix Presentation Examples

ENROLL NOW

HTML5 - MathML

HTML5 Course. HTML5 Certification, HTML5 Training, HTML5 Tutorials.

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 x² + 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>