MathML With HTML5

Ratnesh Singh

6y19.7k12100Article

HTML5MathMathMLmfrac

12 Comments

Join the conversation! Your thoughts help the community grow.

Gowtham Rajamanickam11y ago
good one..
Abhijeet Singh11y ago
nice article
Vithal Wadje11y ago
nice
Abhishek Jaiswal11y ago
A world of HTML5.. great! :)
Karthik Muthu Karuppan11y ago
good one
Tom Mohan11y ago
Thanks for sharing.. useful
Praveen Kumar11y ago
fabulous featureRatnesh Singh
Gowtham Rajamanickam11y ago
amazing..
Gaurav Kumar Arora11y ago
Good one! Is HTML5 support complex equations too?
Mahesh Chand11y ago
Nice! Is this developed by HTML5 committee?
Sanjay Singh11y ago
nice one sir !!!
Nitin11y ago
informative

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:

<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 a²= b².

<!DOCTYPE html>
<html>
<head
<title>Experiments with MathML in HTML5</title>
</head>
<body>
<h3>Experiments with MathML in HTML5</h3>
<math>
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>b</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</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.

<!DOCTYPE html>
<html>
<head><style>
table {
border-collapse: collapse;
}
table, td {
border: 1px solid black;
}</style>
<title>Experiments with MathML in HTML5</title>
</head>
<body>
<h3>Experiments with MathML in HTML5</h3>
<table><tr><td>
A<sub>B</sub> =C<sup>D</sup>
</td><td>
<math>
<msub>
<mi>A</mi>
<mn>B</mn>
</msub>
<mo>=</mo>
<msup>
<mi>C</mi>
<mn>D</mn>
</msup>
</math></td></tr></table>
</body>
</html>

A fraction is generated by the element <mfrac>. For example, A/B is generated by:

<math>
<mfrac>
<mi>A</mi>
<mi>B</mi>
</mfrac>
</math>

We can generate the root symbol with <msqrt> as in the following:

<math>
<msqrt>
<mfrac>
<mi>A</mi>
<mi>B</mi>
</mfrac>
</msqrt>
</math>

We can display the matrix in a webpage as:

<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd>
<mi>2</mi>
</mtd>
<mtd>
<mi>4</mi>
</mtd>
<mtd>
<mi>4</mi>
</mtd>
</mtr>
<mtr>
<mtd>
<mi>5</mi>
</mtd>
<mtd>
<mi>6</mi>
</mtd>
<mtd>
<mi>1</mi>
</mtd>
</mtr>
<mtr>
<mtd>
<mi>6</mi>
</mtd>
<mtd>
<mi>4</mi>
</mtd>
<mtd>
<mi>2</mi>
</mtd>
</mtr>
</mtable>
</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:

<math displaystyle="true">
<munderover >
<mo>∑</mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>1</mn>
</mrow>
<mi>∞</mi>
</munderover>
<mfrac>
<mn>
<mi>n</mi>
<mo>+</mo>1
</mn>
<mi>n</mi>
</mfrac>
</math>

<munderover>
<mo>∫</mo>
<mn>1</mn>
<mn>e</mn>
</munderover>
<mfrac>
<mrow>
<mo>d</mo>
<mi>x</mi>
</mrow>
<mi>x</mi>
</mfrac>
<mo>=</mo>
<mn>1</mn>

Conclusion

In this article, we studied MathML With HTML5