MathML Guide — Math Formulas & Equations in HTML

In this tutorial, you'll learn about MathML Guide. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

MathML (Mathematical Markup Language) lets you display mathematical notation directly in HTML — fractions, radicals, integrals, matrices, and complex formulas — using specialized XML tags. All modern browsers support it natively, no plugins required.

What You'll Learn

By the end of this tutorial, you'll be able to write fractions, square roots, superscripts/subscripts, integrals, sums, matrices, and multi-line equations in MathML, and combine multiple elements into complex formulas.

Where This Fits

flowchart LR
    A["Canvas Deep Dive"] --> B["**MathML**"]
    B --> C["HTML Reference"]
    C --> D["CSS Tutorials"]
    D --> E["Frontend-Ready Developer"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#fff

The <math> Element

Every MathML expression is wrapped in a <math> tag:

<math>
  <mn>42</mn>
</math>

This renders as: 42

Common MathML Elements

Basic MathML Examples

Simple Equation

<math>
  <mrow>
    <mi>E</mi>
    <mo>=</mo>
    <mi>m</mi>
    <msup><mi>c</mi><mn>2</mn></msup>
  </mrow>
</math>

E = mc²

How it works: <mi> marks variables (E, m, c). <mo> marks the equals sign. <msup> creates the superscript (c with exponent 2). <mrow> groups the entire equation into one horizontal row.

Fractions

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

½

<mfrac> takes two children: the numerator (top) and denominator (bottom).

Square Roots

<math>
  <msqrt>
    <msup><mi>x</mi><mn>2</mn></msup>
    <mo>+</mo>
    <msup><mi>y</mi><mn>2</mn></msup>
  </msqrt>
</math>

√(x² + y²)

All children of <msqrt> appear under the square root symbol.

N-th Root

<math>
  <mroot>
    <mi>x</mi>
    <mn>3</mn>
  </mroot>
</math>

∛x

The first child is the radicand, the second is the root degree.

Advanced Formulas

Quadratic Formula

<math>
  <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>

x = (−b ± √(b² − 4ac)) / (2a)

Integral

<math>
  <msubsup>
    <mo>∫</mo>
    <mn>0</mn>
    <mn>1</mn>
  </msubsup>
  <msup><mi>x</mi><mn>2</mn></msup>
  <mi>d</mi><mi>x</mi>
</math>

∫₀¹ x² dx

Note: <msubsup> sets both subscript and superscript on the same base (the integral symbol).

Summation

<math>
  <msubsup>
    <mo>∑</mo>
    <mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
    <mi>n</mi>
  </msubsup>
  <msup><mi>i</mi><mn>2</mn></msup>
</math>

∑ᵢ₌₁ⁿ i²

Matrix

<math>
  <mrow>
    <mo>[</mo>
    <mtable>
      <mtr>
        <mtd><mn>1</mn></mtd>
        <mtd><mn>0</mn></mtd>
      </mtr>
      <mtr>
        <mtd><mn>0</mn></mtd>
        <mtd><mn>1</mn></mtd>
      </mtr>
    </mtable>
    <mo>]</mo>
  </mrow>
</math>

How it works: <mtable> creates the grid. <mtr> is a row. <mtd> is a cell within that row. The <mo>[ and <mo>] wrap the matrix brackets.

Common MathML Mistakes

1. Forgetting <mrow> for Complex Numerators

<!-- ❌ Wrong: ambiguous grouping -->
<mfrac>
  <mi>a</mi><mo>+</mo><mi>b</mi>  <!-- Only 'a' is in numerator -->
  <mn>2</mn>
</mfrac>

<!-- ✅ Correct: group numerator in <mrow> -->
<mfrac>
  <mrow><mi>a</mi><mo>+</mo><mi>b</mi></mrow>
  <mn>2</mn>
</mfrac>

2. Using <mi> for Numbers

<!-- ❌ Wrong: numbers should be <mn>, not <mi> -->
<mi>42</mi>

<!-- ✅ Correct: <mn> is for numbers -->
<mn>42</mn>

<mi> is for identifiers (variables). <mn> is for numbers. The browser renders them differently — numbers in upright font, variables in italic.

3. Not Using <mo> for Operators

<!-- ❌ Wrong: '+' without <mo> is just text -->
<mi>x</mi> + <mi>y</mi>

<!-- ✅ Correct: <mo> marks it as an operator -->
<mi>x</mi><mo>+</mo><mi>y</mi>

Operators need <mo> so the browser applies proper spacing around them.

4. Forgetting the <math> Wrapper

<!-- ❌ Wrong: MathML elements won't render without <math> -->
<mfrac><mn>1</mn><mn>2</mn></mfrac>

<!-- ✅ Correct: always wrap in <math> -->
<math>
  <mfrac><mn>1</mn><mn>2</mn></mfrac>
</math>

Try It Yourself

Render the quadratic formula:

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It's tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

Practice Questions

Q1: What tag wraps every MathML expression? {{< details "Show answer" >}} <math>. All MathML elements must be inside a <math> tag to render. {{< /details >}}

Q2: What's the difference between <mi> and <mn>? {{< details "Show answer" >}} <mi> is for identifiers (variables like x, y, π) — rendered in italic. <mn> is for numbers (42, 3.14) — rendered in upright font. {{< /details >}}

Q3: How do you create a fraction in MathML? {{< details "Show answer" >}} <mfrac><mn>1</mn><mn>2</mn></mfrac> — the first child is the numerator, the second is the denominator. {{< /details >}}

Q4: How do you add both a subscript and superscript to the same element? {{< details "Show answer" >}} Use <msubsup>: <msubsup><mo>∫</mo><mn>0</mn><mn>1</mn></msubsup>. The first child is the base, then subscript, then superscript. {{< /details >}}

Q5: What's <mrow> used for? {{< details "Show answer" >}} It groups multiple elements into a horizontal row. It's essential for grouping complex numerators in fractions and multi-part expressions. {{< /details >}}

Challenge

Write MathML for these formulas:

1. The Pythagorean theorem: a² + b² = c²
2. A 3×3 identity matrix
3. The derivative: d/dx (x²) = 2x
4. The formula for the area of a circle: A = πr²

Frequently Asked Questions

{{< faq "Can I use CSS to style MathML?" >}} Partially. You can set font-size, color, and background on the <math> element. Individual elements like <mi>, <mn>, <mo> can also be styled with CSS. {{< /faq >}}

What's Next?

Complete the HTML section and move to CSS:

What's Next

Congratulations on completing this Mathml tutorial! Here's where to go from here:

• Practice daily — Consistency is more important than long study sessions
• Build a project — Apply what you learned by building something real
• Explore related topics — Check out other tutorials in the same category
• Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!