Understanding HTML MathML
MathML is a markup language for representing mathematical notation and expressions directly within an HTML document.
Instead of displaying an equation as an image, MathML describes its mathematical structure with elements for numbers, variables, operators, fractions, roots, superscripts, subscripts, and other mathematical notation.
What Is MathML?
MathML stands for Mathematical Markup Language. It uses markup to describe the structure and meaning of mathematical expressions so browsers can render mathematical notation as part of a webpage.
MathML is especially useful for educational, scientific, technical, and reference content where mathematical expressions need to be represented as structured content rather than static images.
The <math> Element
MathML content begins with the <math> element, which establishes a MathML expression within the HTML document.
<math>
<mi>x</mi>
<mo>+</mo>
<mn>5</mn>
</math>This markup represents the expression x + 5. The elements inside <math> identify the individual parts of the mathematical expression.
Numbers, Variables and Operators
MathML uses different elements to identify numbers, identifiers such as variables, and mathematical operators.
<mn>represents a number.<mi>represents an identifier, such as a variable.<mo>represents an operator or mathematical symbol.
<math>
<mi>x</mi>
<mo>=</mo>
<mn>10</mn>
</math>Separating the parts of an expression gives the browser structured information about the mathematical notation rather than treating the entire expression as ordinary text.
MathML Fractions
The <mfrac> element creates a fraction. Its first child represents the numerator and its second child represents the denominator.
<math>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</math>This expression displays the fraction one-half.
The numerator and denominator can also contain more complex expressions instead of single numbers.
MathML Superscripts
The <msup> element creates a superscript expression. The first child is the base and the second child is the superscript.
<math>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
</math>This markup represents x squared.
MathML Subscripts
The <msub> element creates a subscript expression. The first child is the base and the second child is the subscript.
<math>
<msub>
<mi>x</mi>
<mn>1</mn>
</msub>
</math>Superscripts and subscripts can also be combined with <msubsup> when an expression requires both.
<math>
<msubsup>
<mi>x</mi>
<mn>1</mn>
<mn>2</mn>
</msubsup>
</math>MathML Roots
The <msqrt> element represents a square root.
<math>
<msqrt>
<mn>16</mn>
</msqrt>
</math>For roots other than a square root, the <mroot> element provides both the expression and the root index.
<math>
<mroot>
<mn>8</mn>
<mn>3</mn>
</mroot>
</math>This example represents the cube root of 8.
Grouping MathML Expressions
The <mrow> element groups multiple MathML elements so they can be treated as a single expression.
<math>
<msup>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
<mn>2</mn>
</msup>
</math>Here, the entire expression x + 2 becomes the base of the exponent rather than applying the exponent to only one part of the expression.
MathML vs Images
Mathematical expressions are sometimes added to webpages as images, but an image contains only a visual representation of the equation. MathML preserves the mathematical expression as structured markup.
Structured mathematical content can scale with text, respond better to changes in presentation, and provide information that assistive technologies may be able to interpret. When MathML is appropriate, it is generally preferable to creating an image containing only an equation.
MathML Accessibility
Because MathML represents the structure of an expression rather than only its appearance, it provides a stronger foundation for accessible mathematical content than an image of an equation.
Actual accessibility can still depend on the browser, operating system, assistive technology, and complexity of the expression. Important mathematical information should be tested with the browsers and assistive technologies expected to be used by the audience.
MathML Example
The following editor displays several MathML expressions. Change the numbers, variables, operators, fractions, roots, and exponents to see how the browser renders the mathematical structure.
MathML Best Practices
- Use MathML when mathematical notation needs to be represented as structured webpage content.
- Use the appropriate MathML element for numbers, identifiers, operators, fractions, roots, superscripts, and subscripts.
- Group parts of an expression when several elements need to be treated as one unit.
- Avoid using images for mathematical expressions when structured MathML can represent the content appropriately.
- Keep the mathematical structure accurate rather than using markup only to imitate the desired visual appearance.
- Test important mathematical content in the browsers and assistive technologies used by your audience.
Summary
MathML provides structured markup for displaying mathematical notation directly within HTML. The <math> element contains the expression, while elements such as <mn>, <mi>, <mo>, <mfrac>, <msup>, <msub>, and <msqrt> describe its individual mathematical parts.
Using structured mathematical markup instead of images makes equations part of the document itself and provides a better foundation for scalable and accessible mathematical content.