HTML5 MathML
HTML5 MathML <math> Tag
The <math> element is the top-level container for every MathML expression. Everything mathematical - fractions, roots, scripts - must live inside a <math> element for the browser to render it as notation rather than plain text.
Definition and Usage
The <math> element switches the browser into MathML rendering. You place it anywhere in the HTML body. By default it renders inline (flowing with surrounding text); set display="block" to centre the formula on its own line.
Syntax
Example
<math>...</math> <!-- inline -->
<math display="block">...</math> <!-- own line -->Attributes
| Attribute | Description |
|---|---|
| display | block for a standalone centred formula, or inline (default) to flow with text. |
| dir | Text direction, ltr or rtl, for right-to-left mathematics. |
| mathbackground | Background colour of the whole expression. |
| mathcolor | Foreground (text) colour of the whole expression. |
Example
The document below shows one inline equation inside a sentence and one block equation on its own line.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MathML math element</title>
</head>
<body>
<p>
The area of a circle is
<math>
<mrow>
<mi>A</mi><mo>=</mo>
<mi>π</mi>
<msup><mi>r</mi><mn>2</mn></msup>
</mrow>
</math>
for any radius r.
</p>
<math display="block">
<mrow>
<mi>E</mi><mo>=</mo>
<mi>m</mi>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
</body>
</html>ℹ️
The <math> element is supported natively by Chrome, Edge, Firefox and Safari as part of MathML Core - no libraries needed.
Key Takeaways
- <math> is the required root that wraps every formula.
- display="block" centres a formula on its own line; the default is inline.
- Use mathcolor and mathbackground to style the whole expression at once.