Skip to main content

MathML — Math Formulas in HTML ➗

Mentor's Note: MathML brings the power of mathematical notation to the web! If you've ever tried to display a fraction or an equation in HTML, you know how painful it is. MathML makes it as natural as writing <p> tags! 📐✨

📚 Educational Content: This guide covers how to embed mathematical formulas directly in HTML using MathML elements.

🎯 Learning Objectives​

By the end of this lesson, you will be able to:

  • Understand what MathML is and when to use it
  • Write basic math expressions with MathML elements
  • Build fractions, powers, subscripts, and square roots
  • Render a complete formula like the quadratic formula
  • Evaluate browser support and alternatives like KaTeX

🌟 The Scenario: Science Textbook Goes Digital 📗​

Mental Model: You're publishing a math textbook as a web page. You need to display the quadratic formula, chemical notation like H₂O, and calculus equations. Plain HTML can't handle fractions or superscripts nested in a readable way. MathML to the rescue!

  • Before MathML: ASCII approximations like x = (-b ± sqrt(b² - 4ac)) / 2a
  • After MathML: Real, formatted, accessible math notation ✅

📖 What Is MathML?​

MathML (Mathematical Markup Language) is a standard for describing mathematical notation in XML and HTML. It was developed by the W3C and is natively supported in modern browsers.

Key Characteristics:​

  • Semantic: Describes the meaning of math, not just its visual appearance
  • Accessible: Screen readers can interpret MathML expressions
  • Standardized: W3C recommendation since 1998 (MathML 3 in 2010)
  • Native: No JavaScript libraries required in supporting browsers

📐 MathML Element Hierarchy​

🔤 Basic MathML Elements​

<mi> — Identifier​

Represents a variable, function name, or symbolic identifier.

<math>
  <mi>x</mi>
  <mi>sin</mi>
  <mi>π</mi>
</math>

Rendered as: x sin π

<mn> — Number​

Represents a numeric literal.

<math>
  <mn>42</mn>
  <mn>3.14</mn>
  <mn>−7</mn>
</math>

Rendered as: 42 3.14 −7

<mo> — Operator​

Represents an operator — +, −, ×, ÷, =, parentheses, etc.

<math>
  <mn>2</mn>
  <mo>+</mo>
  <mn>3</mn>
  <mo>=</mo>
  <mn>5</mn>
</math>

Rendered as: 2 + 3 = 5

<mrow> — Group​

Groups elements together (like parentheses in a visual tree).

<math>
  <mrow>
    <mo>(</mo>
    <mi>x</mi>
    <mo>+</mo>
    <mn>1</mn>
    <mo>)</mo>
  </mrow>
</math>

Rendered as: ( x + 1 )

⚡ Building Expressions​

<msup> — Superscript (Powers)​

<math>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

Rendered as: _x_²

<msub> — Subscript (Indices)​

<math>
  <msub>
    <mi>a</mi>
    <mn>1</mn>
  </msub>
</math>

Rendered as: _a_₁

<mfrac> — Fractions​

<math>
  <mfrac>
    <mn>1</mn>
    <mn>2</mn>
  </mfrac>
</math>

Rendered as: ½

<msqrt> — Square Root​

<math>
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math>

Rendered as: √x

🧪 The Quadratic Formula — Full Example​

Here's how to write the quadratic formula in MathML:

<math 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>
        <mn>4</mn>
        <mi>a</mi>
        <mi>c</mi>
      </msqrt>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mi>a</mi>
    </mrow>
  </mfrac>
</math>

Rendered as:

            ┌──────────
       −b ± √ b² − 4ac
x = ───────────────────
            2a

Let's break it down:

MathML ElementRepresents
<msup><mi>b</mi><mn>2</mn></msup>_b_²
<msqrt>...</msqrt>Square root over b_² − 4_ac
<mfrac><mrow>...</mrow><mrow>...</mrow></mfrac>Fraction with numerator and denominator
<mo>±</mo>Plus-minus operator
<mo>−</mo>Subtraction

Another Example: Einstein's Mass-Energy Equivalence​

<math display="block">
  <mi>E</mi>
  <mo>=</mo>
  <mi>m</mi>
  <msup>
    <mi>c</mi>
    <mn>2</mn>
  </msup>
</math>

Rendered as: E = _mc_²

🌐 Browser Support​

MathML has native support in most modern browsers:

BrowserMathML Support
Firefox✅ Full native support since Firefox 1.0
Safari✅ Full native support
Chrome⚠️ Partial support (Chrome 109+ with flag)
Edge⚠️ Partial support (Chromium-based, same as Chrome)
Opera⚠️ Partial support

⚠️ Note: Chrome 109+ supports MathML Core by default. For older Chrome versions, you may need to enable #enable-mathml in chrome://flags.

Polyfill for Broader Support:​

<!-- Use MathJax as a polyfill for unsupported browsers -->
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

📦 Alternative: Using KaTeX or MathJax​

If you need broader browser support or prefer a simpler syntax, use a JavaScript library.

KaTeX (Fastest Option)​

KaTeX renders LaTeX math into HTML. It's faster than MathJax but has no MathML input.

<!-- Include KaTeX from CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>

<!-- Render inline math -->
<span id="formula"></span>
<script>
  katex.render('x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}', document.getElementById('formula'));
</script>

MathJax (Most Compatible)​

MathJax supports LaTeX, MathML, and ASCIIMath input formats.

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<!-- MathML input -->
<math>
  <msup><mi>e</mi><mrow><mi>i</mi><mi>π</mi></mrow></msup>
  <mo>+</mo>
  <mn>1</mn>
  <mo>=</mo>
  <mn>0</mn>
</math>

Comparison: MathML vs Libraries​

FeatureMathML (Native)KaTeXMathJax
No JS required✅❌❌
Accessibility✅ Native⚠️ Requires config✅ Built-in
Rendering speedFastestVery fastSlower
LaTeX input❌✅✅
Browser supportModern browsersAll browsersAll browsers
Formatting controlFullGoodFull

🧪 Practice Exercises​

  1. Write MathML for Pythagorean theorem: _a_² + _b_² = _c_²
  2. Write MathML for Euler's formula: e_ⁱ_π + 1 = 0
  3. Write MathML for a simple fraction: ¾
  4. Create the area of a circle: A = _πr_²
  5. Add a MathML polyfill (MathJax) to a page and test in Chrome

🔗 Related Topics​

📚 Additional Resources​