The HTML <math> tag
The <math> element is the root of MathML — markup for mathematical and scientific notation that browsers render natively (no images or libraries). It contains MathML elements like <mrow>, <mfrac>, <msup> and <mi>.
Overview
The <math> element embeds MathML (Mathematical Markup Language) inline in HTML, letting the browser render equations natively. Unlike an image of an equation, native MathML is accessible to screen readers, scalable, and selectable as text — a real upgrade for any page with mathematics.
Inside it, the building blocks are small, semantic elements: identifiers go in <mi>, numbers in <mn>, operators in <mo>, fractions in <mfrac>, superscripts in <msup>, and <mrow> groups expressions. MathML Core reached Baseline support in 2023, so it works across current browsers.
Authoring complex MathML by hand is verbose, so in practice many people generate it from LaTeX with a tool rather than writing it manually. The payoff is worth it: native rendering is the most accessible way to present math on the web.
Syntax
<math>
<msup><mi>x</mi><mn>2</mn></msup>
</math>
Example
<math>
<mrow>
<mi>E</mi><mo>=</mo><mi>m</mi><msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
Best practices
- Use
<math>for accessible, scalable equations rather than images of equations. - Build expressions from the semantic children —
<mi>,<mn>,<mo>,<mfrac>,<msup>,<mrow>. - Generate complex MathML from LaTeX with a tool rather than writing it by hand.
- Provide a text alternative for any audience where MathML support is uncertain.
Accessibility
Native MathML is the accessible way to present mathematics: assistive technology can read the structure of an equation, which is impossible with an image. Always prefer <math> over a picture of a formula.
Frequently asked questions
What is the math element?
Why use MathML instead of an image of an equation?
Is MathML supported in browsers?
How do I write MathML?
<mi>, <mn> and <mfrac>, or — for complex equations — generate it from LaTeX with a conversion tool.