HTML5 MathML
HTML5 MathML Introduction
MathML (Mathematical Markup Language) is an XML-based language for describing mathematical notation. In HTML5 you write formulas directly inside a page using the <math> element, and modern browsers render them as properly typeset equations - no images or external libraries required.
What is MathML?
MathML is a W3C standard for encoding both the appearance and the meaning of mathematical formulas. The baseline that browsers implement today is called MathML Core, a subset tailored for the web platform. Instead of shipping equations as pictures, you describe them with elements so they scale with font size, respond to CSS, and remain accessible to screen readers.
Because MathML is XML-based, every element must be properly nested and closed. When you place a <math> element inside an HTML5 document, the browser's HTML parser recognises it and switches into MathML rendering mode for everything inside.
Presentation MathML vs Content MathML
MathML comes in two flavours. Presentation MathML describes how a formula looks - fractions, superscripts, radicals - using tags such as <mfrac>, <msup> and <msqrt>. Content MathML describes what a formula means - the operation of addition, a specific function - using tags such as <apply> and <plus>. Web browsers implement Presentation MathML, so that is what you use on a website.
- Presentation MathML - focuses on visual layout and structure; rendered by browsers.
- Content MathML - focuses on mathematical semantics; used mainly by computer algebra systems and not rendered by browsers.
The <math> Root Element
Every MathML expression begins with the <math> element. It is the container that tells the browser everything inside is mathematical notation. You place it directly in the HTML body, just like any other element.
Example
The document below renders the quadratic formula. Combine <mfrac> for the fraction, <msqrt> for the square root, <msup> for the exponent, and <mi>, <mn> and <mo> for identifiers, numbers and operators.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Quadratic Formula</title>
</head>
<body>
<h1>The Quadratic Formula</h1>
<math 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>
</body>
</html>MathML Core is supported in all modern browsers - Chrome and Edge (from version 109), Firefox and Safari. Native rendering means no MathJax or KaTeX is needed for basic formulas.
Key Takeaways
- MathML encodes math notation as markup so it stays crisp, scalable and accessible.
- Presentation MathML (layout) is what browsers render; Content MathML (semantics) is not.
- Every expression is wrapped in a single <math> root element.
- Use display="block" to centre a formula on its own line; the default is inline.