MathML With HTML5

Ratnesh Singh
5y
18.7k
0
2

Article

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: