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. }
  8. table, td {
  9. border: 1px solid black;
  10. }</style>
  11. <title>Experiments with MathML in HTML5</title>
  12. </head>
  13. <body>
  15. <h3>Experiments with MathML in HTML5</h3>
  17. <table><tr><td>
  19. A<sub>B</sub> =C<sup>D</sup>
  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