HTML5 MathML
HTML5 allows the use of MathML elements in documents, with the corresponding tags being <math>...</math>.
MathML is the Mathematical Markup Language, a standard based on XML (a subset of the Standard Generalized Markup Language) used to write mathematical symbols and formulas on the internet.
Note: Currently, only Firefox or Safari browsers support MathML. Most browsers do not support MathML tags. If your browser does not support these tags, you can use the latest version of Firefox or Safari to view them.
Additionally, we can use third-party style libraries to support mathematical markup. The style library used in this chapter can be downloaded by clicking the button below:
MathML Example
Below is a simple MathML example:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tutorialpro.org(tutorialpro.org)</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 a third-party library for support:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tutorialpro.org(tutorialpro.org)</title>
<script type="text/javascript" src="https://static.tutorialpro.org/assets/js/mathml/mspace.js"></script>
</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>
The resulting image is shown below:
Below is an example with some operators added:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tutorialpro.org(tutorialpro.org)</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>
Using a third-party library for support:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tutorialpro.org(tutorialpro.org)</title>
<script type="text/javascript" src="https://static.tutorialpro.org/assets/js/mathml/mspace.js"></script>
</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>
<mi>x</mi>
</mrow>
<mo>+</mo>
<mn>4</mn>
</mrow>
<mo>=</mo>
<mn>0</mn>
</mrow>
</math>
</body>
</html>
The resulting image is shown below:
Below is an example of a 2x2 matrix, which can be viewed in Firefox 3.5 and above:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tutorialpro.org(tutorialpro.org)</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>
Using a third-party library for support:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tutorialpro.org(tutorialpro.org)</title>
<script type="text/javascript" src="https://static.tutorialpro.org/assets/js/mathml/mspace.js"></script>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>A</mi>
<mo>=</mo>
[
[x, y],
[z, w]
]