HTML5 MathML
HTML5 MathML <mo> Tag
The <mo> element represents an operator, fence or separator - symbols such as +, =, parentheses, integral signs and commas. The browser gives operators appropriate spacing and, when needed, stretches them to fit.
Definition and Usage
Anything that acts on or separates other expressions goes in <mo>: arithmetic operators, relations, brackets, summation and integral signs. Attributes control spacing, stretching and whether the symbol behaves as a large operator with limits.
Attributes
| Attribute | Description |
|---|---|
| stretchy | true lets the operator stretch to match neighbouring content (e.g. tall brackets). |
| largeop | true renders the operator large, as in a displayed integral or sum. |
| movablelimits | true lets limits move under/over in display style. |
| separator | true marks the operator as a separator such as a comma. |
| fence | true marks the operator as an opening or closing fence. |
Example
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathML mo</title>
</head>
<body>
<math display="block">
<mrow>
<mn>2</mn><mo>+</mo><mn>3</mn>
<mo>=</mo>
<mn>5</mn>
</mrow>
</math>
</body>
</html>More Examples
With largeop and movablelimits, <mo> renders a summation with limits above and below.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summation</title>
</head>
<body>
<math display="block">
<mrow>
<munderover>
<mo largeop="true" movablelimits="true">∑</mo>
<mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>n</mi>
</munderover>
<mi>i</mi>
</mrow>
</math>
</body>
</html>💡
Operators have built-in spacing based on context. Wrap a stretchy bracket pair in <mrow> with the content so it stretches to the right height.
Key Takeaways
- <mo> holds operators, fences and separators.
- stretchy makes brackets grow; largeop and movablelimits shape sums and integrals.
- Operators receive automatic spacing based on their role.