HTML5 | MathML <semantics> Tag

The HTML5 MathML <semantics> tag is an inbuilt element in HTML 5. It is used to markup the 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 act as container elements that should contain child elements. There are tow more tag that performs with this tag those are <annotation> tag and the <annotation-xml>. This tag The <annotation> element is the container of those element and containing 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 below mentioned attributes and have to use those attributes on <annotation> and <annotation-xml>.

  • definitionURL: This attribute holds the location of the annotation symbol.
  • encoding: This attribute used to encode the semantic information in the annotation.
  • cd: This attribute is used to holds 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>HTML 5 MathML <semantics> tag</title>
</head>
  
<body>
    <center>
        <h1 style="color:green"
            GeeksforGeeks 
        </h1>
  
        <h3>HTML5 MathML <semantics> 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=
  
                <!-- annotate of Text -->
                <annotation encoding="application/x-tex">
                    x^{2} + y^{2} = z^{2}
                </annotation>
  
            </semantics>
        </math>
    </center>
</body>
</html>                    

chevron_right


Output:

Supported Browsers: The browsers supported by HTML 5 MathML <semantics> tag are listed below:

  • Firefox

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.