‹ Back to *Ry’s MathML
Tutorial*

# Basic Algebra

Just as HTML uses tags to define headings and paragraphs, MathML uses them to describe the various parts of a mathematical expression. This module explores the fundamental elements of MathML: variables, operators, radicals, and fractions. By the end of this module, you should be able combine these into basic algebraic expressions.

While this tutorial focuses on *Presentation* Markup, not all of the
elements we’ll encounter are purely aesthetic. For instance, the
`i`

in `<mi>`

(discussed below) stands for
*identifier*, which is really more semantic than presentational.

As we’ll see throughout this tutorial, typographic decisions often carry mathematical meaning. This makes it hard to draw a clear line between presentation and content.

## Variables

We’ll begin by creating a single variable with MathML. Replace the
```
<!‑‑ Equations will go
here ‑‑>
```

comment in the template file with the following
code.

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<mi>x</mi>
</math>
```

The `<math>`

tag begins a new MathML expression, and it
should always use the above URI for its `xmlns`

attribute. The
`display`

attribute determines how the expression is rendered. Its
value can be either `block`

or `inline`

, as described
below.

Value | Description |
---|---|

`block` |
Render the expression as its own “paragraph” |

`inline` |
Render the expression in the same line as surrounding text |

We’ll use `block`

expressions for the majority of this
tutorial, deferring inline elements to the Advanced Formatting module.

Next, the `<mi>`

element defines a MathML
**identifier**, which can be a function name, a constant, or a
variable. In this case, we used the letter `x`

as the
identifier’s value, which your browser should render as the
following.

## Numbers

MathML uses the `<mn>`

element to represent numeric
literals, which can be either integers or real numbers (digits with a decimal
point). Underneath our existing `<math>`

element, try adding
the following expression.

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<mn>3</mn>
<mi>x</mi>
</math>
```

Notice that your browser rendered the number `3`

with an upright
font, while it decided the `x`

identifier should be italicized:

Even though we’re working with Presentation Markup, the
`<mn>`

and `<mi>`

elements do carry semantic
meaning. This lets a MathML reader make certain assumptions about how to
typeset their contents (e.g., italicizing variable names). We’ll learn
how to control these stylistic assumptions in Vectors and Functions.

## Operators

For now, let’s move on to the `<mo>`

element for
marking up operators. Again, the following expression should be added below the
existing examples in your `hello-mathml.html`

file.

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<mn>3</mn>
<mi>x</mi>
<mo>-</mo>
<mn>2</mn>
<mi>y</mi>
</math>
```

This example uses `<mo>`

for a minus sign, but it’s
meant to denote any kind of “operator-like” entity including
`=`

, `+`

, `×`

, `÷`

,
and even parentheses and commas. Explicitly delimiting operators helps MathML
viewers make important layout decisions like where to break lines.

It’s important to note that traditional typography differentiates
hyphens from minus signs, which are longer. In the above HTML code, we used a
hyphen, but since we put it in an `<mo>`

element, the browser
inferred that we were trying to create a minus sign.

## Operator Entities

To represent special symbols like minus signs, HTML offers several character entities dedicated to mathematics. A few of the most common operators are included below.

Symbol | Entity | Hex | Description |
---|---|---|---|

− | `−` |
`−` |
Subtraction |

× | `×` |
`×` |
Multiplication |

÷ | `÷` |
`÷` |
Division |

≠ | `≠` |
`≠` |
Not equal |

≈ | `≈` |
`≈` |
Approximately equal |

< | `<` |
`<` |
Less than |

≤ | `≤` |
`≤` |
Less than or equal |

> | `>` |
`>` |
Greater than |

≥ | `≥` |
`≥` |
Greater than or equal |

± | `±` |
`±` |
Plus or minus |

In general, HTML entities can be used anywhere normal characters can exist,
though the ones shown above will typically be used as the content of an
`<mo>`

element:

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<mn>3</mn>
<mi>x</mi>
<mo>-</mo>
<mn>2</mn>
<mi>y</mi>
<mo>≥</mo>
<mn>0</mn>
</math>
```

Other useful symbols can be found in the Symbol Reference.

## Superscripts

Superscripts are created with the `<msup>`

tag. Inside of
`<msup>`

, you should include the base, followed by the
superscript, like so:

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>
```

Like many MathML elements, `<msup>`

acts more like a
function than a normal HTML markup tag. In the above snippet, the base and the
superscript can be thought of as two “arguments” passed to the
`<msup>`

“function.” Both arguments need to be a
single MathML element (e.g., `<mi>`

or
`<mn>`

).

This works fine when we’re dealing with atomic values like
`x`

and `2`

, but things get more complicated once we
start working with compound expressions.

## Grouping Sub-Expressions

Because the exponent shown above is comprised of more than one element, we
can’t pass it directly into `<msup>`

. Instead, we need
to use an `<mrow>`

tag to group the expression, as shown
below.

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<msup>
<mi>e</mi>
<mrow>
<mn>2</mn>
<mi>x</mi>
<mo>+</mo>
<mn>1</mn>
</mrow>
</msup>
</math>
```

Of course, this works the other way around—you can wrap the
superscript argument in an `<mrow>`

to create a complex base
expression, too.

Technically, `<mrow>`

should be used to encode the complete
mathematical structure of an expression, meaning *every* sub-expression
should be contained in an `<mrow>`

. For example:

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<msup>
<mrow>
<mo>(</mo>
<mrow>
<mrow><mn>3</mn><mi>x</mi></mrow>
<mo>-</mo>
<mrow><mn>2</mn><mi>y</mi></mrow>
</mrow>
<mo>)</mo>
</mrow>
<mn>2</mn>
</msup>
</math>
```

Explicit `<mrow>`

tags do help MathML renderers make layout
decisions, and they provide extra semantic information that’s useful for
automated interpretation. However, this level of completeness isn’t
strictly necessary for most practical purposes.

Also notice that we used `<mo>`

to encode the paretheses.
While this is perfectly legal, MathML does offer a more convenient way to
bracket expressions, which we’ll discuss in Vectors and Functions.

## Radicals

MathML provides two elements for drawing radicals:
`<msqrt>`

and `<mroot>`

. The former creates a
square root, taking the base as its only argument, and the latter creates an
indexed root, taking the base and the index as arguments (in that order).

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<msqrt>
<mn>4</mn>
</msqrt>
<mo>×</mo>
<mroot>
<mn>8</mn>
<mn>3</mn>
</mroot>
<mo>=</mo>
<mn>4</mn>
</math>
```

Your browser should render this equation as follows.

As with `<msup>`

, you should make sure
`<mroot>`

has exactly two child elements by wrapping complex
sub-expressions in an `<mrow>`

. This isn’t actually
necessary for `<msqrt>`

, since an `<mrow>`

will be implied if you pass more than one argument.

## Fractions

The last component we’ll look at in *Basic Algebra* is the
`<mfrac>`

tag for creating fractions. It takes the numerator
as the first argument, followed by the denominator:

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<mfrac>
<mn>1</mn>
<mi>x</mi>
</mfrac>
</math>
```

This should render as an vertical fraction:

The `<mfrac>`

element also contains a few useful attributes
that let you control its appearance:

Attribute | Description |
---|---|

`linethickness` |
The stroke width of the fraction bar. Value should be a length
measured in `px` , `pt` , `em` , etc. |

`numalign` |
The alignment of the numerator. Can be `left` ,
`right` , or `center` . |

`denomalign` |
The alignment of the denominator. Can be `left` ,
`right` , or `center` . |

`bevelled` |
Whether the fraction should be displayed vertically or inline. Can be
`true` or `false` . |

These attributes let you manually arrange complex expressions. For example:

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<mfrac linethickness='3px'>
<mfrac bevelled='true'>
<mn>1</mn>
<mi>x</mi>
</mfrac>
<mrow>
<mi>y</mi>
<mo>−</mo>
<mn>2</mn>
</mrow>
</mfrac>
</math>
```

Setting `linethickness`

to zero is also the preferred way to mark
up binomial coefficients.

Again, like other MathML “functions,” sub-expressions should be
placed in an `<mrow>`

to ensure only two arguments are
passed to `<mfrac>`

.

## Summary

This section introduced MathML’s three atomic elements:
`<mi>`

, `<mn>`

, and `<mo>`

.
We also saw how these tokens can be combined into complex layouts using
superscripts, radicals, and fractions. Together, these provide everything we
need to mark up basic algebraic equations like the quadratic formula:

```
<math xmlns='http://www.w3.org/1998/Math/MathML' display='block'>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−</mo>
<mrow>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</mrow>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</math>
```

Towards the end of this module, we saw how attribute values can affect the appearance of a MathML element. In the next module, we’ll discuss several other attributes that will give us fine-grained control over MathML’s typographic decisions.