<semantics>

Baseline 2023
Newly available

Since January 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The <semantics> MathML element associates annotations with a MathML expression, for example its text source as a lightweight markup language or mathematical meaning expressed in a special XML dialect. Typically, its structure is:

By default, only the first child of the <semantics> element is rendered while the others have their display set to none.

css
semantics > :not(:first-child) {
  display: none;
}

Note: Legacy MathML specifications allowed renderers to decide the default rendering according to available annotations. The following rules for determining the visible child have been implemented in some browsers. See MathML 4 for the distinction between Presentation and Content MathML.

  • If no other rules apply: By default only the first child is rendered, which is supposed to be Presentation MathML.
  • If the first child is a Presentation MathML element other than <annotation> or <annotation-xml>, render the first child.
  • If no Presentation MathML is found, render the first <annotation> or <annotation-xml> child element of <semantics> without a src attribute. For <annotation-xml> elements the encoding attribute must be equal to one of following values:
    • "application/mathml-presentation+xml"
    • "MathML-Presentation"
    • "SVG1.1"
    • "text/html"
    • "image/svg+xml"
    • "application/xml"

Note that "application/mathml+xml" is not mentioned here as it does not distinguish between Content or Presentation MathML.

Attributes

This element's attributes include the global MathML attributes.

Example

html
<math display="block">
  <semantics>
    <!-- The first child is the MathML expression rendered by default. -->
    <mrow>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>y</mi>
    </mrow>

    <!--
      Annotate with content MathML, a dedicated XML dialect
      to express the meaning of mathematical formulas.
    -->
    <annotation-xml encoding="application/mathml-content+xml">
      <apply>
        <plus />
        <apply>
          <power />
          <ci>x</ci>
          <cn type="integer">2</cn>
        </apply>
        <ci>y</ci>
      </apply>
    </annotation-xml>

    <!--
      Annotate with LaTeX, a lightweight markup language
      to write mathematical formulas.
    -->
    <annotation encoding="application/x-tex">x^{2} + y</annotation>
  </semantics>
</math>

Technical summary

Specifications

Specification
MathML Core
# semantics-and-presentation

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
semantics
Use the algorithm described on MDN to determine the visible child.
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.