MathML Tags in HTML 5

MathML Tags in HTML 5

Regular HTML code can be used to display mathematical symbols inline with other text using HTML Unicode characters (for which the Unicode math symbols reference may come in handy). HTML 5 also supports MathML, which is used to describe mathematical formulas using XML code. MathML not only determines how a formula is display, but also describes the actual calculation.

Here is an actual working demo of the MathML example code below.

Note: Since support for MathML depends on the browser and available fonts, the appearance of the MathML demo above varies greatly. In Firefox on Windows with the Fonts for MathML-enabled Mozilla installed, the MathML example code above looks like this:

(Since this is an image, the "attribute" link is not clickable.)

To install the MathML fonts in Windows 7, unzip the file then select all of the STIX*.otf files and drag/copy/drop them into the Fonts Page of the Control Panel.

back to top

back to top

MathML Tag Attributes

Attributes of the <math> tag

Attributes of the <mo> tag

back to top

Diagram of attribute name and value with the various parts labeled

Here is an example of MathML code. The xmlns attribute on the <math> tag sets the default namespace for all of its descendants. Since the names of any HTML elements need to be in the HTML namespace, the <a> tag for the attribute link must also include an xmlns attribute.

See MathML demo above for how this code looks in your browser.

<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
  <mrow>
    <munder>
      <munder>
        <mrow>
          <mover>
            <mover>
              <mrow>
                <mi style="font-family: Verdana, sans-serif">style</mi>
              </mrow>
              <mo style="font-size: smaller">&#xFE37;</mo>
            </mover>
            <mtext style="font-size: larger; font-weight: bold">name</mtext>
          </mover>
          <mo>=</mo>
          <mover>
            <mover>
              <mrow>
                <ms style="font-family: Verdana, sans-serif">font-weight: bold</ms>
                  <!-- <ms> automatically adds quotes -->
              </mrow>
              <mo style="font-size: smaller">&#xFE37;</mo>
            </mover>
            <mtext style="font-size: larger; font-weight: bold">value</mtext>
          </mover>
         </mrow>
        <mo style="font-size: smaller">&#xFE38;</mo>
      </munder>
      <mtext style="font-size: larger; font-weight: bold">
        <a href="../../attributes/index.html" xmlns="http://www.w3.org/1999/xhtml">attribute</a>
      </mtext>
    </munder>
  </mrow>
</math>

The styles of the mi, mo and mtext tags could be put into a CSS style sheet rather than coding the style attribute on each tag:

@namespace mathml "http://www.w3.org/1998/Math/MathML"

mathml|mi {
   font-family: Verdana, sans-serif;
}

mathml|mo {
   font-size: smaller;
}

mathml|mtext {
   font-size: larger;
   font-weight: bold;
}

Note: Since support for MathML depends on the browser and available fonts, the appearance of the code above varies greatly. In Firefox on Windows with the Fonts for MathML-enabled Mozilla installed, the MathML example code above looks like this:

(Since this is an image, the "attribute" link is not clickable.)

To install the MathML fonts in Windows 7, unzip the file then select all of the STIX*.otf files and drag/copy/drop them into the Fonts Page of the Control Panel.

The Quadratic Formula

Here is another example with some actual mathematical formulas:

The first <math> tag has style="display: inline" to display the quadratic equation inline with the text of the paragraph. The second MathML formula gives the solution to that equation.

<p>This formula is used to calculate the roots of a quadratic equation
(<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML" style="display: inline">
<mrow><mi>a</mi><mo>⁢<!-- Unicode INVISIBLE TIMES --></mo><msup><mi>x</mi><mn>2</mn></msup>
<mo> </mo><mi>b</mi><mo>⁢<!-- Unicode INVISIBLE TIMES --></mo><mi>x</mi>
<mo> </mo><mi>c</mi><mo>=</mo><mn>0</mn></mrow></math>):</p>

<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
   <mrow>
      <mi>x</mi>
      <mo>=</mo>
      <mfrac>
         <mrow>
            <mo form="prefix">−<!-- Unicode MINUS SIGN --></mo>
            <mi>b</mi>
            <mo>±<!-- Unicode PLUS-MINUS SIGN --></mo>
            <msqrt>
               <msup>
                  <mi>b</mi>
                  <mn>2</mn>
               </msup>
               <mo>−<!-- Unicode MINUS SIGN --></mo>
               <mn>4</mn>
               <mo>⁢<!-- Unicode INVISIBLE TIMES --></mo>
               <mi>a</mi>
               <mo>⁢<!-- Unicode INVISIBLE TIMES --></mo>
               <mi>c</mi>
            </msqrt>
         </mrow>
         <mrow>
            <mn>2</mn>
            <mo>⁢<!-- Unicode INVISIBLE TIMES --></mo>
            <mi>a</mi>
         </mrow>
      </mfrac>
   </mrow>
</math>

back to top

Changes in HTML 5 - MathML

What's new in HTML 5

Support for MathML is one of the new features of HTML 5.

Differences between HTML 5 and earlier versions of HTML

MathML was not supported in older versions of HTML.

back to top