HTML5 MathML Introduction

What is MathML?

MathML is a W3C standard for encoding both the appearance and the meaning of mathematical formulas. The current baseline supported by browsers is MathML Core, a subset tailored for the web platform. Instead of shipping equations as images, you describe them semantically so they scale, respond to fonts, and remain accessible to screen readers.

Because MathML is XML-based, every tag must be properly nested and closed. When placed inside an HTML5 document, the browser's HTML parser understands the <math> element and switches into MathML mode for its contents.

Presentation MathML vs Content MathML

MathML has two flavours. Presentation MathML describes how a formula looks (fractions, superscripts, radicals) using tags such as <mfrac>, <msup> and <msqrt>. Content MathML describes what a formula means (the operation of addition, a specific function) using tags such as <apply> and <plus>. Web browsers implement Presentation MathML, so that is what you use on a website.

• Presentation MathML - focuses on layout and visual structure; supported by browsers.
• Content MathML - focuses on mathematical semantics; used mainly by computer algebra systems, not rendered by browsers.

The <math> root element

Every MathML expression begins with the <math> element. It acts as the container that tells the browser everything inside is mathematical notation. You place it directly in your HTML body.

<math>
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>-</mo><mi>b</mi>
        <mo>&#177;</mo>
        <msqrt>
          <mrow>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>-</mo>
            <mn>4</mn><mi>a</mi><mi>c</mi>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn><mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

This example combines several presentation elements: <mfrac> builds the fraction, <msqrt> draws the square root, <msup> creates the exponent, and <mi>, <mn> and <mo> hold identifiers, numbers and operators respectively.