HTML5 MathML <semantics> Tag

Last Updated : 05 Jul, 2023

The HTML5 MathML <semantics> tag is an inbuilt element in HTML 5. It is used to markup mathematics there are two possible ways to markup mathematics.

Presentation MathML is used to control the layout of any mathematical equations.
Content MathML is designed to encode the semantic mathematical meaning and make expressions understandable to computer algebra systems.

This tag acts as a container element that should contain child elements. There are two more tags that perform with this tag those are <annotation> tag and the <annotation-xml>. This tag The <annotation> element is the container of those elements and contains semantic information in a non-XML format, whereas the <annotation-xml> element contains content in an XML format, like Content MathML or OpenMath. Syntax:

<semantics> child elements </semantics>

Attributes: This tag accepts the below-mentioned attributes and has to use those attributes on <annotation> and <annotation-xml>.

definitionURL: This attribute holds the location of the annotation symbol.
encoding: This attribute is used to encode the semantic information in the annotation.
cd: This attribute is used to hold the annotation symbols.
name: This attribute holds the name of the annotation key symbol.
src: This attribute holds the location of an external source for semantic information.

Below example illustrates the <semantics> tag in HTML 5:

html

<!DOCTYPE html>
<html>

<head>
    <title>HTML 5 MathML &lt;semantics&gt; tag</title>
</head>

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

        <h3>HTML5 MathML &lt;semantics&gt; tag</h3>

        <math>
            <semantics>

                <!-- Presentation MathML -->
                <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>

                <!-- Content MathML -->
                <annotation-xml encoding="MathML-Content">
                    <apply>
                        <plus />
                        <apply>
                            <power />
                            <ci>x</ci>
                            <cn type="integer">2</cn>
                        </apply>
                        <apply>
                            <power />
                            <ci>y</ci>
                            <cn type="integer">2</cn>
                        </apply>
                        <equal />
                        <apply>
                            <power />
                            <ci>z</ci>
                            <cn type="integer">2</cn>
                        </apply>
                    </apply>
                </annotation-xml>

                <!-- annotate of an image -->
                <annotation encoding="image/png"
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20191226151654/762.png" />

                <!-- annotate of Text -->
                <annotation encoding="application/x-tex">
                    x^{2} + y^{2} = z^{2}
                </annotation>

            </semantics>
        </math>
    </center>
</body>

</html>