<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

BCD tables only load in the browser