MathML

LaTeX produces beautiful PDFs, but the web runs on HTML. MathML (Mathematical Markup Language) is the W3C standard for representing mathematics in web pages. If you want math that’s accessible, searchable, and natively rendered by browsers, MathML is the answer.

What Is MathML?

MathML is an XML-based language for describing mathematical notation. It’s part of the HTML5 specification, meaning modern browsers can render it without JavaScript.

<!-- The quadratic formula in MathML -->
<math xmlns="http://www.w3.org/1998/Math/MathML"
      display="block">
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo>-</mo><mi>b</mi>
        <mo>+/-</mo>
        <msqrt>
          <mrow>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>-</mo>
            <mn>4</mn><mi>a</mi><mi>c</mi>
          </mrow>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn><mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
</math>

Compare that with the LaTeX version: x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}. MathML is verbose. Nobody writes it by hand for complex expressions. But it has properties that LaTeX lacks for web contexts.

Presentation vs. Content MathML

MathML has two dialects:

Presentation MathML

• Describes how math looks
• Elements: <mrow>, <mfrac>, <msup>
• Widely supported by browsers
• What you’ll use 99% of the time

Content MathML

• Describes what math means
• Elements: <apply>, <plus/>, <times/>
• Limited browser support
• Used in computer algebra systems

For web publishing, Presentation MathML is the standard. Content MathML is used in specialized applications (Wolfram, Maple, symbolic computation).

MathML Elements Reference

Token Elements

• Element: <mi>x</mi> | Renders: \( x \) | Purpose: Identifier (variable, function name)

• Element: <mn>42</mn> | Renders: \( 42 \) | Purpose: Number

• Element: <mo>+</mo> | Renders: \( + \) | Purpose: Operator

• Element: <mtext>if</mtext> | Renders: if | Purpose: Text

• Element: <ms>hello</ms> | Renders: “hello” | Purpose: String literal

• Element: <mspace/> | Renders: (space) | Purpose: Explicit spacing

  Layout Elements

• Element: <mrow> | LaTeX Equivalent: {...} grouping | Purpose: Group elements horizontally

• Element: <mfrac> | LaTeX Equivalent: \frac | Purpose: Fraction

• Element: <msqrt> | LaTeX Equivalent: \sqrt | Purpose: Square root

• Element: <mroot> | LaTeX Equivalent: \sqrt[n] | Purpose: \( n \)th root

• Element: <msup> | LaTeX Equivalent: ^ | Purpose: Superscript

• Element: <msub> | LaTeX Equivalent: _ | Purpose: Subscript

• Element: <msubsup> | LaTeX Equivalent: _^ | Purpose: Both sub and superscript

• Element: <munder> | LaTeX Equivalent: \underset | Purpose: Underscript (limits)

• Element: <mover> | LaTeX Equivalent: \overset | Purpose: Overscript (accents)

• Element: <mtable> | LaTeX Equivalent: array/matrix | Purpose: Table/matrix

• Element: <mtr> | LaTeX Equivalent: \\ | Purpose: Table row

• Element: <mtd> | LaTeX Equivalent: & | Purpose: Table cell

  Browser Support

The landscape changed dramatically in 2023 when Chromium (Chrome, Edge, Opera, Brave) shipped native MathML support. As of 2026:

• Browser: Firefox | MathML Support: Full (best rendering) | Since: 2002
• Browser: Safari | MathML Support: Full | Since: 2016
• Browser: Chrome | MathML Support: MathML Core | Since: 2023 (v109)
• Browser: Edge | MathML Support: MathML Core | Since: 2023 (follows Chromium)
• Browser: Opera | MathML Support: MathML Core | Since: 2023 (follows Chromium)

  Important: MathML is now a viable option for web math without any JavaScript library. If your audience uses modern browsers (Chrome 109+, Firefox, Safari), you can serve MathML directly and it will render natively.

MathML and Accessibility

MathML’s biggest advantage over image-based math is accessibility:

• Screen readers can read MathML aloud. An equation like \( \frac{a}{b} \) is spoken as “a over b” rather than “image of equation.”
• Braille displays can render MathML through the Nemeth Braille math code.
• Search engines can index the content of MathML expressions.
• Copy-paste works. Users can copy a MathML expression and paste it into a CAS or another document.
• Magnification scales perfectly (it’s markup, not an image).

Tip: If you publish math on the web and care about accessibility (you should), MathML is the gold standard. KaTeX and MathJax can output MathML, so you can write LaTeX syntax and get accessible output.

The MathML Tree Structure

Every MathML expression is a tree. The root is <math>, and elements nest to describe structure:

• <mfrac> has exactly two children: numerator and denominator.
• <msup> has exactly two children: base and exponent.
• <mrow> groups siblings into a logical unit.

Generating MathML

Nobody writes MathML by hand for real content. Here are the practical generation tools:

From LaTeX

# pandoc (most versatile)
pandoc input.tex -o output.html --mathml

# LaTeXML (most faithful to LaTeX)
latexml input.tex | latexmlpost --dest=output.html

# tex4ht (from TeX Live)
htlatex input.tex "xhtml,mathml"

# KaTeX (JavaScript, runtime or build-time)
katex.renderToString("\\frac{a}{b}", {output: "mathml"})

# MathJax (JavaScript)
MathJax.tex2mml("\\frac{a}{b}")

From Other Tools

• Microsoft Word: Equations in Word can export as MathML (File > Save As > Web Page).
• Wolfram Mathematica: ExportString[expr, "MathML"]
• Maple: Built-in MathML export.
• GeoGebra: Exports equations as MathML.

MathML in HTML

<!DOCTYPE html>
<html>
<head>
    <title>MathML Example</title>
</head>
<body>
    <p>The quadratic formula is:
    <math display="block">
        <mrow>
            <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>
        </mrow>
    </math>
    </p>
</body>
</html>

The display="block" attribute creates a centered display equation. Without it, the math renders inline.

MathML vs. LaTeX for the Web

• Feature: Browser-native | MathML: Yes | LaTeX (via KaTeX/MathJax): No (needs JS)
• Feature: Accessible | MathML: Yes | LaTeX (via KaTeX/MathJax): Partial (MathJax better than KaTeX)
• Feature: Compact syntax | MathML: No | LaTeX (via KaTeX/MathJax): Yes
• Feature: Copy-pasteable | MathML: Yes | LaTeX (via KaTeX/MathJax): Depends on renderer
• Feature: Searchable | MathML: Yes | LaTeX (via KaTeX/MathJax): No (rendered as spans)
• Feature: Learning curve | MathML: High | LaTeX (via KaTeX/MathJax): Low (if you know LaTeX)
• Feature: Rendering quality | MathML: Good | LaTeX (via KaTeX/MathJax): Excellent

  Important: The practical approach: write math in LaTeX syntax, use KaTeX or MathJax to render it on the web, and configure the renderer to output MathML for accessibility. You get the best of both worlds: easy authoring and accessible output.

Exercises

1. Write the MathML for \( E = mc^2 \) by hand. Test it in an HTML file in your browser.
2. Use pandoc to convert a short LaTeX document with three equations to HTML with MathML output. Open the result and verify the equations render correctly.
3. Compare the same equation rendered by native MathML, KaTeX, and MathJax in three browser tabs. Note differences in spacing, font, and rendering speed.
4. Test MathML accessibility: enable VoiceOver (macOS) or NVDA (Windows) and navigate through a MathML equation. Report what the screen reader announces.