Getting started with MathML

In this article, we will take a simple HTML document and see how to add MathML formulas into it, introducing a few elements along the way.

Prerequisites: Basic software installed, basic knowledge of working with files, and HTML basics (study Introduction to HTML.)
Objective: To understand the basic syntax of MathML and how to integrate it in HTML pages.

Inserting formulas in HTML via the <math> element

MathML uses the same syntax as HTML to represent a tree of elements and attributes. In particular, each mathematical formula is represented by an element <math> which can be placed inside an HTML page. In the following document, it is inside a paragraph of text:

html
<!doctype html>
<html lang="en-US">
  <head>
    <title>My first math page</title>
  </head>
  <body>
    <p>
      The fraction
      <math>
        <mfrac>
          <mn>1</mn>
          <mn>3</mn>
        </mfrac>
      </math>
      is not a decimal number.
    </p>
  </body>
</html>

The <mfrac> element specifies a fraction with a numerator (its first child) and a denominator (its second child). This is how it renders in your browser:

Warning: If you just see "1 3" instead of a fraction, then your browser may not support MathML. Check out the browser compatibility table for further details.

The display attribute

Note that in the previous example, the formula is on the same line as the text of the paragraph. However, it is quite common to instead render large mathematical formulas centered on their own line as shown below. To achieve that, you need to attach a display="block" attribute on the <math> element.

You may also notice some subtle change in the appearance: the text and vertical spacing of the fraction becomes a bit bigger. Without the display="block" attribute, the height is minimized to avoid disturbing the flow of the surrounding text. With the display="block" attribute, priority is instead put on legibility of the mathematical formula.

Note: This corresponds to the LaTeX's concept of inline formulas (delimited by dollar signs $...$) and display formulas (delimited by \[...\]).

Note: The appearance change mentioned above is actually controlled by the math-style property which is initially normal for <math display="block"> and compact otherwise. In some MathML subtrees, this property can then automatically become compact but we will ignore this subtlety for this introductory tutorial. Again, this is similar to LaTeX.

Grouping with the <mrow> element

The <math> element can actually contain an arbitrary number of children and will essentially render them in a row. For instance, the simple formula "1 + 2 + 3" would be encoded like this in MathML:

html
<math>
  <mn>1</mn>
  <mo>+</mo>
  <mn>2</mn>
  <mo>+</mo>
  <mn>3</mn>
</math>

The <mrow> element is a generic container that performs similar layout but can be placed anywhere in the MathML subtree. It is helpful to group several elements together. For instance, the numerator of the following fraction (its first child) is "one plus two".

html
<math>
  <mfrac>
    <mrow>
      <mn>1</mn>
      <mo>+</mo>
      <mn>2</mn>
    </mrow>
    <mn>3</mn>
  </mfrac>
</math>

Active learning: nested expressions

As an exercise, figure out how to write the following expressions using only the MathML elements we've seen so far. If you are stuck or want to verify the solution, check the source code of the example.

Summary

In this article, we have taken a look at how to use the <math> element to insert a mathematical formula inside a HTML document. We have learned about rendering differences between <math> elements that use display="block" or not. In addition, we stumbled upon a couple of other MathML elements: <mfrac> for fractions, <mrow> for grouping and finally a few text elements. We will analyze these text containers further in the next article.

See also