MathML is a markup language used to represent mathematical formulas and symbols in web pages. It provides a standardized, structured representation for mathematical, scientific, and technical publications, allowing complex mathematical expressions to be accurately parsed and rendered by browsers.
Basic structure of MathML
MathML documents are wrapped by the <math> element, which contains all the components of a mathematical formula. A simple MathML formula example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathML Example</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<msqrt>
<mrow>
<mn>1</mn>
<mo>+</mo>
<msup>
<mi>y</mi>
<mn>2</mn>
</msup>
</mrow>
</msqrt>
</mrow>
<mn>3</mn>
</mfrac>
</mrow>
</math>
</body>
</html>MathML element classification:
Presentation Markup
Presentation markup is used to describe the visual layout and typesetting of mathematical formulas. The main elements include:
<mi>: represents a single letter, number or other isolated mathematical character as an identifier.<mo>: represents an operator, such as addition, subtraction, multiplication and division, equal sign, brackets, etc.<mrow>: used to combine other MathML elements to form a row.<mfrac>: creates a fraction structure.<msqrt>: creates a radical (square root).<msup>: creates a superscript.<msub>: creates a subscript.<msubsup>: creates both a subscript and a superscript.<munder>: creates an underline.<mover>: creates an overline.<munderover>: Create both underscores and overscores.<mfenced>: Enclose mathematical expressions with parentheses, brackets, etc.<mn>: Indicates a number.<mtext>: Inserts normal text into a mathematical formula.
Content Markup
Content tags are used to describe the semantics and logical structure of mathematical formulas, making them easier for machines to process and understand. Content tags mainly include:
<ci>: Indicates the semantic content of a mathematical variable or identifier.<cn>: Indicates the semantic content of a number.<apply>: Apply a function or operator to a set of parameters.<csymbol>: Introduce custom or externally defined mathematical symbols.
Mixed Markup
In actual use, MathML documents usually use a mixture of presentation tags and content tags to balance visual presentation and semantic interpretation.
Browser support and rendering
Although MathML is a W3C recommendation, browser support is inconsistent. Here are some browsers that support MathML:
Firefox: Good native support for MathML.Safari: Need to turn on the “Use math fonts in web pages” option (Settings > Advanced > Experimental Features).ChromeandEdge: Limited native support, rendering can be done with third-party extensions such as MathJax or KaTeX.Internet Explorer: No support for MathML.
To ensure cross-browser compatibility, MathML is often used in conjunction with JavaScript libraries such as MathJax or KaTeX, which can automatically detect browser support and convert MathML to SVG, HTML+CSS, or MathML itself (if the browser supports it), so that mathematical formulas can be rendered correctly in most browsers.
MathML and LaTeX
LaTeX is a commonly used typesetting system, especially in academia, for writing documents containing mathematical formulas. Many mathematical software and online platforms support LaTeX input, but HTML pages do not natively support LaTeX. However, through libraries such as MathJax or KaTeX, mathematical formulas in LaTeX format can be converted into MathML, SVG, or HTML+CSS code that can be rendered on the web.
MathML Example
Basic arithmetic operations:
<!-- addition -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mn>3</mn>
<mo>+</mo>
<mn>2</mn>
<mo>=</mo>
<mn>5</mn>
</math>
<!-- Subtraction -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mn>7</mn>
<mo>-</mo>
<mn>4</mn>
<mo>=</mo>
<mn>3</mn>
</math>
<!-- multiplication -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mn>2</mn>
<mo>×</mo>
<mn>3</mn>
<mo>=</mo>
<mn>6</mn>
</math>
<!-- division -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mn>8</mn>
<mn>4</mn>
</mfrac>
<mo>=</mo>
<mn>2</mn>
</math>Exponents and radicals:
<!-- index -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>x</mi>
<mn>3</mn>
</msup>
</math>
<!-- Square root -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msqrt>
<mi>a</mi>
<mo>+</mo>
<mi>b</mi>
</msqrt>
</math>
<!-- square root -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mroot>
<mi>x</mi>
<mn>5</mn>
</mroot>
</math>Fractions and brackets:
<!-- Simple fraction -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
</math>
<!-- Nested fractions -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfrac>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
<mfrac>
<mn>3</mn>
<mn>4</mn>
</mfrac>
</mfrac>
</math>
<!-- brackets -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfenced open="(" close=")">
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mfenced>
</math>Algebraic expression:
<!-- Algebraic Expressions -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>P</mi>
<mfenced open="(" close=")">
<mi>x</mi>
</mfenced>
<mo>=</mo>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<mn>3</mn>
<mi>x</mi>
<mo>+</mo>
<mn>2</mn>
</math>
<!-- Equation with variables -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>a</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mi>b</mi>
<mo>+</mo>
<mi>c</mi>
</mrow>
<mn>2</mn>
</mfrac>
</math>Greek letters and special symbols:
<!-- Greek letters -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mi>α</mi>
<mi>β</mi>
<mi>γ</mi>
<mi>δ</mi>
<mi>ε</mi>
<!-- ...and so on... -->
</math>
<!-- Special symbols -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mo>∈</mo>
<mo>∉</mo>
<mo>⊆</mo>
<mo>⊇</mo>
<mo>→</mo>
<mo>⇒</mo>
<mo>⇔</mo>
<!-- ...and many more... -->
</math>Limits, integrals and derivatives:
<!-- limit -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<munder>
<mo>lim</mo>
<mrow>
<mi>x</mi>
<mo>→</mo>
<mn>0</mn>
</mrow>
</munder>
<mfrac>
<mi>sin</mi>
<mi>x</mi>
</mfrac>
<mo>=</mo>
<mn>0</mn>
</math>
<!-- integral -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mo>∫</mo>
<mfenced open="[" close="]">
<mi>a</mi>
<mi>b</mi>
</mfenced>
</mrow>
<mi>f</mi>
<mfenced open="(" close=")">
<mi>x</mi>
</mfenced>
<mi>d</mi>
<mi>x</mi>
</math>
<!-- Derivative -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<msup>
<mi>d</mi>
<mn>2</mn>
</msup>
<mfenced open="|" close="|">
<mi>y</mi>
</mfenced>
<mo>=</mo>
<mi>d</mi>
<mfenced open="|" close="|">
<mi>x</mi>
</mfenced>
</math>Matrices and vectors:
<!-- matrix -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mtable>
<mtr>
<mtd>
<mn>1</mn>
</mtd>
<mtd>
<mn>2</mn>
</mtd>
<mtd>
<mn>3</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>4</mn>
</mtd>
<mtd>
<mn>5</mn>
</mtd>
<mtd>
<mn>6</mn>
</mtd>
</mtr>
</mtable>
</math>
<!-- vector -->
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd>
<mn>1</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>2</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mn>3</mn>
</mtd>
</mtr>
</mtable>
</mfenced>
</math>
