HTML5 Math ML

HTML5 Math ML with Examples: In HTML 5 documents, the mathematical notations are denoted by the MathML for your web pages because MathML supports all mathematical symbols. The MathML is the short form of Mathematical Markup Language and these mathematical notations are maintained by W3C.

Rather than considering signs, symbols, notation in mathematics users should use MathML elements mainly for the structure and content of the HTML 5 document.

HTML5 Math ML

HTML 5 Math ML Advantages

  • The MathML can convert one form to another form and also generate output in different forms like text, graphical displays, speech synthesizers which defines flexibility and also print devices that encode the mathematical notations.
  • The MathML allows providing information for many types of documents and renders.
  • The MathML encoded data can be used by any software to generate data.

Types of HTML5 MathML

The MathML can be described into two types

  • Presentational Markup – Used for mathematical expression and layout.
  • Content Markup – Used for the content of the document.

HTML5 MathML Browser support

HTML5 MathML supports all new web browsers and few of them are mentioned below.

  • Google Chrome 4.0
  • Mozilla Firefox 3.5
  • Safari 4.0

Examples for HTML5 MathML elements

a) To generate Pythagorean Theorem using MathML elements.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Pythagorean theorem</title>
</head>
<body>
<math xmlns="http://www.tutorials.freshersnow.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>

Pythagorean Theorem Example Output

Run the example in Mozilla Firefox 3.5 or higher versions to get output like as follows

html5 Math ML 3

Otherwise, if you run the above example in other web browsers then the output be like

html5 Math ML 4

b) To generate any Equation by MathML Elements in HTML 5

<html>
<head>
<meta charset="UTF-8">
<title>MathML Examples</title>
</head>
<body>
<math xmlns="http://www.tutorials.freshersnow.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>

Any Equation by MathML Elements Example Output

Try to run the above code in Mozilla Firefox 3.5 or higher versions then the output will be like

HTML5 Math ML 1

In case, the above example is opened in any web browsers then the output will display as

HTML5 Math ML 2

c) To generate matrix by HTML5 MathML elements

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Matrix Examples</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>

HTML5 Matrix Example Output

If you run the above code in Mozilla Firefox 3.5 or higher versions then the output will display like

html5 Math ML 5

Otherwise, if the above code opened in other browsers then the following output will appear.

html5 Math ML 6

Conclusion

  • The MathML in HTML 5 standards are maintained by World Wide Web Consortium
    (W3C).
  • A few specific web browsers support MathML.
  • In MathML, to get mathematical notations in HTML 5 document it uses XML mark.