Post
Ask Question

MathML With HTML5

Introduction

 
The Mathematical Markup Language (MathML) is a markup language to show mathematical and scientific content on the Web. HTML5 allows us to use MathML elements inside a document using <math>...</math> tags. A mathematical expression must be inserted into the element <math> with a specified namespace as in the following:
  1. <math xmlns="http://www.w3.org/1998/Math/MathML">  </math>  
In HTML5 we can simply write <math></math>. The basic elements of the <math> tag are as follows:
 
 
We will now try to print  a2= b2.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head  
  4.  <title>Experiments with MathML in HTML5</title>  
  5. </head>  
  6. <body>  
  7.   <h3>Experiments with MathML in HTML5</h3>  
  8. <math>  
  9.       <mrow>  
  10.         <msup><mi>a</mi><mn>2</mn></msup>          
  11.         <mo>=</mo>  
  12.         <msup><mi>b</mi><mn>2</mn></msup>  
  13.       </mrow>  
  14.     </math>  
  15. </body>  
  16. </html>  
To display the preceding superscript expression we used <msup>. We can also use <msub> to show subscripts. We can also achieve these results with <sup></sup> and <sub></sub>. But there are visual differences if we do not use any style sheet in the latter case.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head><style>  
  4. table {  
  5.     border-collapse: collapse;  
  6. }  
  7.   
  8. table, td {  
  9.     border: 1px solid black;  
  10. }</style>  
  11.  <title>Experiments with MathML in HTML5</title>  
  12. </head>  
  13. <body>  
  14.   
  15.   <h3>Experiments with MathML in HTML5</h3>  
  16.   
  17. <table><tr><td>  
  18.    
  19.     A<sub>B</sub> =C<sup>D</sup>  
  20.    
  21. </td><td>  
  22. <math>  
  23.  <msub>  
  24.      <mi>A</mi>  
  25.      <mn>B</mn>  
  26.    </msub>  
  27.    <mo>=</mo>  
  28.    <msup>  
  29.      <mi>C</mi>  
  30.      <mn>D</mn>  
  31.    </msup>  
  32. </math></td></tr></table>  
  33. </body>  
  34. </html>  
 
A fraction is generated by the element <mfrac>. For example, A/B is generated by:
  1. <math>  
  2.   <mfrac>  
  3.      <mi>A</mi>  
  4.      <mi>B</mi>  
  5.   </mfrac>  
  6. </math>  
We can generate the root symbol with <msqrt> as in the following:
  1. <math>  
  2.  <msqrt>  
  3.      <mfrac>  
  4.       <mi>A</mi>  
  5.       <mi>B</mi>  
  6.    </mfrac>  
  7.    </msqrt>  
  8. </math>  
We can display the matrix in a webpage as:
  1. <mfenced open="[" close="]">  
  2.     <mtable>  
  3.         <mtr>  
  4.             <mtd>  
  5.                 <mi>2</mi>  
  6.             </mtd>  
  7.             <mtd>  
  8.                 <mi>4</mi>  
  9.             </mtd>  
  10.             <mtd>  
  11.                 <mi>4</mi>  
  12.             </mtd>  
  13.         </mtr>  
  14.         <mtr>  
  15.             <mtd>  
  16.                 <mi>5</mi>  
  17.             </mtd>  
  18.             <mtd>  
  19.                 <mi>6</mi>  
  20.             </mtd>  
  21.             <mtd>  
  22.                 <mi>1</mi>  
  23.             </mtd>  
  24.         </mtr>  
  25.         <mtr>  
  26.             <mtd>  
  27.                 <mi>6</mi>  
  28.             </mtd>  
  29.             <mtd>  
  30.                 <mi>4</mi>  
  31.             </mtd>  
  32.             <mtd>  
  33.                 <mi>2</mi>  
  34.             </mtd>  
  35.         </mtr>  
  36.     </mtable>  
  37. </mfenced> 
<mtable> behaves as an HTML table. “open” and “close” attributes in <mfenced> are used to display brackets (here we have used square, it can be curly brackets).
 
MathML also enables us to show mathematical symbols like ∑, ≠, and π. These symbols have their definitions in MathML. A complete list of all possible symbols is given at http://www.w3.org/TR/xml-entity-names/. For the following expression:
 
  1. <math displaystyle="true">  
  2.     <munderover >  
  3.         <mo>∑</mo>  
  4.         <mrow>  
  5.             <mi>n</mi>  
  6.             <mo>=</mo>  
  7.             <mn>1</mn>  
  8.         </mrow>  
  9.         <mi>∞</mi>  
  10.     </munderover>  
  11.     <mfrac>  
  12.         <mn>  
  13.             <mi>n</mi>  
  14.             <mo>+</mo>1  
  15.         </mn>  
  16.         <mi>n</mi>  
  17.     </mfrac>  
  18. </math>  
  1. <munderover>  
  2.     <mo>∫</mo>  
  3.     <mn>1</mn>  
  4.     <mn>e</mn>  
  5. </munderover>  
  6. <mfrac>  
  7.     <mrow>  
  8.         <mo>d</mo>  
  9.         <mi>x</mi>  
  10.     </mrow>  
  11.     <mi>x</mi>  
  12. </mfrac>  
  13. <mo>=</mo>  
  14. <mn>1</mn>  
 

Conclusion

 
In this article, we studied MathML With HTML5


Similar Articles