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:
<!
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:
<
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".
<
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.