<semantics>

  • Revision slug: Web/MathML/Element/semantics
  • Revision title: <semantics>
  • Revision id: 479443
  • Created:
  • Creator: fscholz
  • Is current revision? Yes
  • Comment quick links

Revision Content

{{MathMLRef()}}

In MathML there are two ways to mark up mathematics: Presentation MathML is used to control the layout of equations, whereas Content MathML is designed to encode the semantic mathematical meaning and to make expressions understandable to computer algebra systems. The MathML elements <semantics>, <annotation> and <annotation-xml> are used to combine presentation and content markup and to provide both, layout information and semantic meaning of mathematical expressions.

The <semantics> element acts as a container element associating annotations and must have child elements (it will raise an invalid markup error otherwise). The <annotation> element is the container element containing semantic information in a non-XML format, whereas the <annotation-xml> element contains content in an XML format, e.g. Content MathML or OpenMath.

The rules of determining the visible child in a <semantics> element are the following:

  • If no rule other rule applies: By default only the first child is rendered, which is supposed to be presentation markup.
  • 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>.
    Beware that <annotation-xml> elements are only recognized, if the encoding attribute is set to one of the following:
    • "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

The following attributes can be set on <annotation> and <annotation-xml>:

definitionURL
The location of the annotation key symbol.
encoding
The encoding of the semantic information in the annotation (e.g. "MathML-Content", "MathML-Presentation", "application/openmath+xml", "image/png")
cd
The content dictionary that contains the annotation key symbol.
name
The name of the annotation key symbol.
src
The location of an external source for semantic information.

Example

<math>
  <semantics>

    <!-- Presentation MathML -->
    <mrow>
      <msup>
        <mi>x</mi>
        <mn>2</mn>
      </msup>
      <mo>+</mo>
      <mi>y</mi>
    </mrow>

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

    <!-- annotate an image -->
    <annotation encoding="image/png" src="some/path/formula.png"/>

    <!-- annotate TeX -->
    <annotation encoding="application/x-tex">
      x^{2} + y 
    </annotation> 
   
  </semantics>
</math>

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} {{ CompatGeckoDesktop("1.0") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatNo() }} {{ CompatGeckoMobile("1.9.2") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

Gecko-specific notes

  • The algorithm of determining the visible child in <semantics> has been corrected in {{geckoRelease("23")}} to match the MathML specification. In prior versions the first child element has been rendered.
  • In Gecko <annotation> and <annotation-xml> elements are ignored if the src attribute is set.

Specifications

Specification Status Comment
{{ SpecName('MathML3', 'chapter5.html', 'Mixing Markup Languages for Mathematical Expressions') }} {{ Spec2('MathML3') }} Current specification
{{ SpecName('MathML2', 'chapter5.html', 'Combining Presentation and Content Markup ') }} {{ Spec2('MathML2') }} Initial specification

 

Revision Source

<p>{{MathMLRef()}}</p>
<p>In MathML there are two ways to mark up mathematics: <em>Presentation</em> MathML is used to control the layout of equations, whereas <em>Content</em> MathML is designed to encode the semantic mathematical meaning and to make expressions understandable to computer algebra systems. The MathML elements <code>&lt;semantics&gt;</code>, <code>&lt;annotation&gt;</code> and <code>&lt;annotation-xml&gt;</code> are used to combine presentation and content markup and to provide both, layout information and semantic meaning of mathematical expressions.</p>
<p>The <code>&lt;semantics&gt;</code> element acts as a container element associating annotations and must have child elements (it will raise an <em>invalid markup </em>error otherwise). The <code>&lt;annotation&gt;</code> element is the container element containing semantic information in a non-XML format, whereas the <code>&lt;annotation-xml&gt;</code> element contains content in an XML format, e.g. Content MathML or OpenMath.</p>
<p>The rules of determining the visible child in a <code>&lt;semantics&gt;</code> element are the following:</p>
<ul>
  <li>If no rule other rule applies: By default only the first child is rendered, which is supposed to be presentation markup.</li>
  <li>If the first child is a presentation MathML element other than <code>&lt;annotation&gt;</code> or <code>&lt;annotation-xml&gt;</code>, render the first child.</li>
  <li>If no Presentation MathML is found, render the first <code>&lt;annotation&gt;</code> or <code>&lt;annotation-xml&gt;</code> child element of <code>&lt;semantics&gt;</code>.<br />
    Beware that <code>&lt;annotation-xml&gt;</code> elements are only recognized, if the encoding attribute is set to one of the following:
    <ul>
      <li><code><span id="the-code"><span class="s">"application/mathml-presentation+xml</span></span></code>"</li>
      <li><code><span id="the-code"><span class="s">"MathML-Presentation</span></span></code>"</li>
      <li><span id="the-code"><span class="s"><code>"SVG1.1</code></span></span>"</li>
      <li><code>"text/html"</code></li>
      <li><code>"image/svg+xml"</code></li>
      <li><code><span class="st">"application/xml</span></code>".</li>
    </ul>
    Note that<span id="the-code"><span class="c"> "application/mathml+xml</span></span>" is <em>not</em> mentioned here as it does not distinguish between Content or Presentation MathML.</li>
</ul>
<h2 id="Attributes">Attributes</h2>
<p>The following attributes can be set on <code>&lt;annotation&gt;</code> and <code>&lt;annotation-xml&gt;</code>:</p>
<dl>
  <dt id="attr-definitionurl">
    definitionURL</dt>
  <dd>
    The location of the annotation key symbol.</dd>
  <dt id="attr-encoding">
    encoding</dt>
  <dd>
    The encoding of the semantic information in the annotation (e.g. "MathML-Content", "MathML-Presentation", "application/openmath+xml", "image/png")</dd>
  <dt id="attr-cd">
    cd</dt>
  <dd>
    The content dictionary that contains the annotation key symbol.</dd>
  <dt id="attr-name">
    name</dt>
  <dd>
    The name of the annotation key symbol.</dd>
  <dt id="attr-src">
    src</dt>
  <dd>
    The location of an external source for semantic information.</dd>
</dl>
<h2 id="Example">Example</h2>
<pre class="brush: html">
&lt;math&gt;
  &lt;semantics&gt;

    &lt;!-- Presentation MathML --&gt;
    &lt;mrow&gt;
      &lt;msup&gt;
        &lt;mi&gt;x&lt;/mi&gt;
        &lt;mn&gt;2&lt;/mn&gt;
      &lt;/msup&gt;
      &lt;mo&gt;+&lt;/mo&gt;
      &lt;mi&gt;y&lt;/mi&gt;
    &lt;/mrow&gt;

    &lt;!-- Content MathML --&gt;
    &lt;annotation-xml encoding="MathML-Content"&gt;
      &lt;apply&gt;
        &lt;plus/&gt;
        &lt;apply&gt;
          &lt;power/&gt;
          &lt;ci&gt;x&lt;/ci&gt;
          &lt;cn type="integer"&gt;2&lt;/cn&gt;
        &lt;/apply&gt;
        &lt;ci&gt;y&lt;/ci&gt;
      &lt;/apply&gt;
    &lt;/annotation-xml&gt;

    &lt;!-- annotate an image --&gt;
    &lt;annotation encoding="image/png" src="some/path/formula.png"/&gt;

    &lt;!-- annotate TeX --&gt;
    &lt;annotation encoding="application/x-tex"&gt;
      x^{2} + y 
    &lt;/annotation&gt; 
   
  &lt;/semantics&gt;
&lt;/math&gt;</pre>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("1.9.2") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
<ul>
  <li>The algorithm of determining the visible child in <code>&lt;semantics&gt;</code> has been corrected in {{geckoRelease("23")}} to match the MathML specification. In prior versions the first child element has been rendered.</li>
  <li>In Gecko <code>&lt;annotation&gt;</code> and <code>&lt;annotation-xml&gt;</code> elements are ignored if the <code>src</code> attribute is set.</li>
</ul>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table" height="49" width="1000">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('MathML3', 'chapter5.html', 'Mixing Markup Languages for Mathematical Expressions') }}</td>
      <td>{{ Spec2('MathML3') }}</td>
      <td>Current specification</td>
    </tr>
    <tr>
      <td>{{ SpecName('MathML2', 'chapter5.html', 'Combining Presentation and Content Markup ') }}</td>
      <td>{{ Spec2('MathML2') }}</td>
      <td>Initial specification</td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision