A Comparison of Mathematics Tags

Note: although important, this section is somewhat technical compared to the other introductory tutorial pages. If you’re just getting started, it’s fine to scan through this page quickly, continue on to the next pages, and come back here as a reference when needed!

Sometimes it can be confusing to decide whether you should use <m> or <math>. Roughly speaking, use <m> if all you want to do is display a mathematical expression; use <math> if your expression will be used in later computations, or might need to be simplified. That sounds simple but, as we’ll see, sometimes the differences can be subtle.

To start, here’s a review of the two tags:

• <m> takes expressions such as x^3-x (or LaTeXcode, like \sqrt{a^2+b^2}) and simply renders them nicely on-screen. The <m> tag does no simplifications or computations; DoenetML essentially treats the contents of an <m> object as a string of characters.

• The contents of a <math> tag are also displayed nicely on the screen, but internally, a <math> object is much more complicated than an <m> object. The contents of a <math> object could be used in computations, so Doenet keeps track of a lot of additional information.

In practice, the behavior of <m> and <math> can look very similar. Consider the following example.

<p>Define two numbers:
  <m name="a">1</m>,
  <m name="b">2</m></p>
<p>Add them together:
  <m name="abSum">$a+$b</m></p>
 
<p>Define two numbers:
  <math name="x">1</math>,
  <math name="y">2</math></p>
<p>Add them together:
  <math name="xySum">$x+$y</math></p>

Test code here.

Although using <m> or <math> results in the same display: there’s a crucial, invisible difference. As described above, $abSum is just a string of characters, with no mathematical meaning or value. Conversely, $xySum is a mathematical object, with a value which could be simplified, and used in later computations.

To drive this point home: the following code adds simplify to the definition of xySum, and also uses the result in a subsequent calculation.

<p>Define two numbers:
  <math name="x">1</math>,
  <math name="y">2</math></p>
<p>Add them together:
  <math name="xySum" simplify>$x+$y</math></p>
<p>Square the result: <math simplify>$xySum^2</math></p>

Test code here.

Those calculations would not be possible with the <m> tag. In the following code, $abSum^2 results in _^2, which is Doenet-speak for “the square of some unknown value.” Because $abSum is a string of characters, not a number or mathematical expression, Doenet does not know how to square it.

<p>Define two numbers:
  <m name="a">1</m>,
  <m name="b">2</m></p>
<p>Add them together:
  <m name="abSum">$a+$b</m></p>
<p>Square the result: <math simplify>$abSum^2</math></p>

Test code here.

With the above example in mind, it’s tempting to “play it safe” and use <math> tags everywhere. But the extra “internal machinery” associated with <math> objects means that <m> tags are more efficient with resources, and it’s a good idea to use them when possible.

Unexpected Consequences

Sometimes it seems like <m> will suffice for your purposes, but it’s worth planning ahead to think about whether your expression needs to be in a <math> tag instead!

Consider the following example, which uses three numbers to create and solve a quadratic equation. (Later in this tutorial you’ll learn how to let the user provide these coefficients; for now we’ll just define them in the code.)

<p>Define the coefficients for a quadratic function here: 
  <math name="a">2</math>,
  <math name="b">8</math>,
  <math name="c">6</math>.
</p>
 
<p>Then <m>$a x^2 + $b x + $c = 0</m> when <m>x</m> is
  <math simplify>(-$b + sqrt($b^2- 4*$a*$c))/(2*$a)</math> or
  <math simplify>(-$b - sqrt($b^2- 4*$a*$c))/(2*$a)</math>.
</p>

Test code here.

Everything seems to be working! We’ve used <m> tags to display the quadratic equation, because we’re not doing any computations there; we’re just copying the coefficients into the expression. By contrast, we used <math> tags to do the computations with the quadratic formula. (To verify that Doenet is doing the computations, try removing simplify from one of the <math> tags and click “Update.”)

As it turns out, however, there’s a subtle issue with our code. Check out what happens with the <m> tag with different coefficients:

<p>Define the coefficients for a quadratic function here: 
  <math name="a">1</math>,
  <math name="b">-3</math>,
  <math name="c">2</math>.
</p>
 
<p>Then <m>$a x^2 + $b x + $c = 0</m> when <m>x</m> is
  <math simplify>(-$b + sqrt($b^2- 4*$a*$c))/(2*$a)</math> or
  <math simplify>(-$b - sqrt($b^2- 4*$a*$c))/(2*$a)</math>.
</p>

Test code here.

Why does the quadratic equation look so strange? The <m> tag does no simplifications. It doesn’t know (or care) about mathematical conventions such as:

• We typically write $x^2$ instead of $1x^2$.
• We usually write $+ -3$ as $-3$.

How can we ensure that the quadratic equation will always be rendered nicely? It turns out to be trickier than expected. A natural first thought is to use <math> instead of <m>:

<p>Define the coefficients for a quadratic function here: 
  <math name="a">1</math>,
  <math name="b">-3</math>,
  <math name="c">2</math>.
</p>
 
<p>Equation: <math>$a x^2 + $b x + $c = 0</math>
</p>

Test code here.

That’s an improvement; when displaying a <math> object, Doenet makes some straightforward adjustments such as writing $-3 x$ instead of $+ -3x$, but we still have $1x^2$ at the beginning of the equation. Perhaps we can fix that issue by adding simplify to the tag defining the equation?

<p>Define the coefficients for a quadratic function here: 
  <math name="a">1</math>,
  <math name="b">-3</math>,
  <math name="c">2</math>.
</p>
 
<p>Equation: <math simplify>$a x^2 + $b x + $c = 0</math>
</p>

Test code here.

We’re definitely getting closer! Doenet now displays $x^2 - 3x + 2$ as expected, but the equation still looks a little odd, with $0 =$ at the beginning. That happened because we asked Doenet to simplify the entire equation, and not just the quadratic polynomial. Doenet’s simplification routines decided that the simpler, constant side of the equation should come first. Mathematically that’s fine, but it looks odd to our eyes.

To fix that remaining issue, we should use <math> to simplify just the quadratic polynomial, and display the rest of the equation with <m>. We could use side-by-side <math> and <m> tags, or nest them, as shown below. Nesting the tags is preferred, because it ensures the spacing is correct throughout the equation. (In the side-by-side example below, $=$ is too close to the $2$. You could manually leave a space between the side-by-side tags, but experienced HTML users know that it’s dicey to expect that blank spaces or lines will be preserved.)

<p>Define the coefficients for a quadratic function here: 
  <math name="a">1</math>,
  <math name="b">-3</math>,
  <math name="c">2</math>.
</p>
 
<p>Side-by-side: <math simplify>$a x^2 + $b x + $c</math><m>=0</m>
</p>
 
<p>Nested: <m><math simplify>$a x^2 + $b x + $c</math>=0</m>
</p>

Test code here.

The moral of the story: when choosing between <m> and <math>, it’s worth thinking about all the possible values your code might have to deal with, and whether simplifications will ever be necessary!

Final Note

For convenience, we focused on comparing the <m> tag to <math>, but everything we’ve said about <m> on this page also applies to the <me> tag.