HTML5 MathML <math> tag

Last Updated : 07 Jul, 2023

The MathML <math> tag in HTML5 is the most prioritized element. Whatever MathML element you want to use should be wrapped inside of the <math> tag.

Syntax:

<math> child elements </math>

Attributes: The tag accepts some attributes which are listed below:

class|id|style: This attribute is used to hold the styles of the child elements.
dir: This attributes holds the direction value. It holds two types of direction values ltr for left to right and rtl for right to left.
href: This attribute is used to hold any hyperlink to a specified URL.
mathbackground: This attribute holds the value of the math expressions background color.
mathcolor: This attribute holds the color of the math expressions.
display: This attribute holds the value of rendering of HTML element. There can be two value block which means that this element will be displayed outside the current span of text, inline which means that this element will be displayed inside the current span of text.
mode: Express the display attribute, possible values are display and inline.
overflow: It holds the value how the expression will behave. The default value is the linebreak and other possible values are scroll, elide, truncate, and scale.

Below example illustrates the MathML <math> tag in HTML5:

Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>HTML5 MathML math tag</title>
</head>

<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>

        <h3>HTML5 MathML math tag</h3>

        <math>
            <mrow>
                <mrow>
                    <msup>
                        <mi>x</mi>
                        <mn>2</mn>
                    </msup>
                    <mo>+</mo>
                    <msup>
                        <mi>y</mi>
                        <mn>2</mn>
                    </msup>
                </mrow>
                <mo>=</mo>
                <msup>
                    <mi>z</mi>
                    <mn>2</mn>
                </msup>
            </mrow>
        </math>
    </center>
</body>

</html>