MathML or Mathematics Markup Language is used to write mathematical formulas such as functions, fractions, scripts, radicals, matrices, integrals, series, etc. It is based on XML and generally embedded in HTML documents.

Syntax

MathML uses the same syntax as HTML. For example, each mathematical formula is placed in <math> tag. Another example is <mfrac> which represents a fraction with a nominator and denominator. This example shows some common math formulas written using MathML:

<body>
    <math>
        <mtext>Pythagorean Theorem:</mtext>
    </math>
    <math>
        <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>

    <math>
        <mtext>Quadratic Formula:</mtext>
    </math>

    <math>
        <mrow>
            <mi>x</mi>
            <mo>=</mo>
            <mfrac>
                <mrow>
                    <mo form="prefix">&minus;</mo>
                    <mi>b</mi>
                    <mo>&PlusMinus;</mo>
                    <msqrt>
                        <msup>
                            <mi>b</mi>
                            <mn>2</mn>
                        </msup>
                        <mo>&minus;</mo>
                        <mn>4</mn>
                        <mo>&InvisibleTimes;</mo>
                        <mi>a</mi>
                        <mo>&InvisibleTimes;</mo>
                        <mi>c</mi>
                    </msqrt>
                </mrow>
                <mrow>
                    <mn>2</mn>
                    <mo>&InvisibleTimes;</mo>
                    <mi>a</mi>
                </mrow>
            </mfrac>
        </mrow>
    </math>

    <math>
        <msup>
            <mi>x</mi>
            <mi>y</mi>
        </msup>
        <mo>&#x2261;</mo>
        <msup>
            <mi>y</mi>
            <mi>x</mi>
        </msup>
    </math>
</body>

Math formula written with MathML

Style

Styling MathML is the same as HTML. You can use CSS to style the MathML tags. This example is the style for the above sample:

* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

math {
    font-size: 24px;
    font-family: Latin Modern Math;
}

mi {
    color: blueviolet;
    font-size: 48px;
}

mn {
    color: brown;
    font-size: 36px;
}

MathML: Write Math Like HTML

Table of contents

Syntax

Style