HTML5: Use of MathML – A better way to present mathematical notation

The word MathML represents Mathematical Markup Language, which means a language which designed to present and capture mathematics for Web.

In computer language,

MathML is an XML application for describing Mathematical notation and capturing both the structure and content. The goal of MathML is to enable Mathematics to be served, received and processed in WWW.

MathML elements can be used inside HTML5 document using <math>...</math> tags.

Ummm… 😐 difficult to understand the theory… me too :(.

So, let’s check one example for our clarification :-

Example – 1

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Binomial Theorem</title>
    </head>
    <body>
        <p>Binomial Theorem:</p>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mrow>
                <msup>
                    <mfenced>
                        <mrow>
                            <mi>a</mi>
                            <mo>+</mo>
                            <mi>b</mi>
                        </mrow>
                    </mfenced>
                    <mn>2</mn>
                </msup>
                <mo>=</mo>
                <msup>
                    <mrow>
                        <mi>a</mi>
                    </mrow>
                    <mn>2</mn>
                </msup>
                <mo>+</mo>
                <msup>
                    <mrow>
                        <mi>b</mi>
                    </mrow>
                    <mn>2</mn>
                </msup>
                <mo>+</mo>
                <mrow>
                    <mn>2</mn>
                    <mi>a</mi>
                    <mi>b</mi>
                </mrow>
            </mrow> 
        </math>
    </body>
</html>

This would produce the following output :-
Screen Shot 2014-10-03 at 6.04.35 pm

Wonderful 😯 … This is really nice :eek:. Using the above markup language, we can create any mathematical notation. 🙂 Great !!!

The above code contains some tags, which might be unknown for some of us. So, let’s analyze those and put some light on those tags for better understanding.

  1. <mrow> : horizontal row of items
  2. <msup>, <munderover> : superscripts, limits over and under operators like sums, etc.
  3. <mfrac> : mathematical fractions
  4. <msqrt> and <mroot> : roots
  5. <mfenced> : surrounding content with fences, such as parentheses.
  6. <mi>x<mi> : mathematical identifiers
  7. <mo>+</mo> : mathematical operators
  8. <mn>2</mn> : mathematical numbers
  9. <mtext>non zero</mtext> : mathematical text

😎 Let’s check some more example and that should be little critical ones ;-).

Example – 2

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Quadratic Formula</title>
    </head>

    <body>
        <p>Quadratic Formula:</p>
        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mrow>
                <mi>x</mi>
                <mo>=</mo>
                <mfrac>
                    <mrow>
                        <mo form="prefix">-</mo>
                        <mi>b</mi>
                        <mo>±<!-- &amp;PlusMinus; --></mo>
                        <msqrt>
                            <msup>
                                <mi>b</mi>
                                <mn>2</mn>
                            </msup>
                            <mo>-</mo>
                            <mn>4</mn>
                            <mi>a</mi>
                            <mi>c</mi>
                        </msqrt>
                    </mrow>
                    <mrow>
                        <mn>2</mn>
                        <mi>a</mi>
                    </mrow>
                </mfrac>
            </mrow>
        </math>
    </body>
</html>

This would produce the following output :-
Screen Shot 2014-10-03 at 7.22.44 pm

Example – 3

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Matrix Example</title>
        
        <style>
            body {
                margin-left: 10%;
                margin-top: 5%;
            }
        </style>
    </head>

    <body>
        <p>Matrix Example:</p>

        <math xmlns="http://www.w3.org/1998/Math/MathML">
            <mrow>
                <mfenced open="(" close=")">
                    <mtable>
                        <mtr>
                           <mtd><mi>1</mi></mtd>
                           <mtd><mi>5</mi></mtd>
                           <mtd><mi>3</mi></mtd>
                        </mtr>
                        <mtr>
                           <mtd><mi>8</mi></mtd>
                           <mtd><mi>2</mi></mtd>
                           <mtd><mi>6</mi></mtd>
                        </mtr>
                        <mtr>
                           <mtd><mi>7</mi></mtd>
                           <mtd><mi>9</mi></mtd>
                           <mtd><mi>0</mi></mtd>
                        </mtr>
                    </mtable>
                </mfenced>
            </mrow>
        </math>
    </body>
</html>

This would produce the following output :-
Screen Shot 2014-10-03 at 7.55.46 pm

Great !!! 🙂 😎 Very interesting one :). We can do any mathematical notation with MathML.

Note: Please check here for Browser support details.

Thanks 🙂 and will be happy to listen from you 🙂 :).

2 thoughts on “HTML5: Use of MathML – A better way to present mathematical notation”

Leave a comment