HTML5 MathML

« Previous Lesson

Next Lesson »

HTML5 MathML

HTML5 MathML allows us to display mathematical expressions in the browser. Almost all the latest browsers support <math> </math> tags.

If your browser does not support HTML5 MathML, we strongly recommend you update your browser.

HTML5 MathML Examples

Below is the code for inserting MathML inside the HTML5 document.

<!DOCTYPE html>
<HTML>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <math>
        <mrow>
            <msup>
                <mi>x</mi>
                <mn>2</mn>
            </msup>
            <mo>+</mo>
            <msup>
                <mi>y</mi>
                <mn>2</mn>
            </msup>
            <mo>=</mo>
            <msup>
                <mi>z</mi>
                <mn>2</mn>
            </msup>
        </mrow>
    </math>
</body>
</html>

The output of this code will be

$HTML5 MathML$

Using HTML5 MathML Characters

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mrow>
            <mrow>
                <msup>
                    <mi>a</mi>
                    <mn>2</mn>
                </msup>
                <mo>+</mo>
                <mrow>
                    <mi>b</mi>
                    <mo></mo>
                    <mn>x</mn>
                </mrow>
                <mo>+</mo>
                <mn>c</mn>
            </mrow>
            <mo>=</mo>
            <mn>0</mn>
        </mrow>
    </math>
</body>
</html>

The output of this code will be

$HTML5 MathML$

If you want to see the results like ax2 + bx + c= 0, use Firefox 4.5 or higher.

Presenting 2X2 Matrix

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mrow>
            <mi>A</mi>
            <mo>=</mo>
            <mfenced open="[ " close="] ">
                <mtable>
                    <mtr>
                        <mtd>
                            <mi>a</mi>
                        </mtd>
                        <mtd>
                            <mi>b</mi>
                        </mtd>
                    </mtr>
                    <mtr>
                        <mtd>
                            <mi>c</mi>
                        </mtd>
                        <mtd>
                            <mi>d</mi>
                        </mtd>
                    </mtr>
                </mtable>
            </mfenced>
        </mrow>
    </math>
</body>
</html>

The output of this code will be

$HTML5 MathML$

If you want to see the results in proper matrix format, you can use Firefox 3.5 or the latest browser.

Extra sources:

https://en.wikipedia.org/wiki/MathML

Next Lesson » « Previous Lesson