A course page shows the formula for solving an equation, a scientific article displays an integral, a chemistry sheet details a reaction. Writing that kind of content in ordinary HTML runs into trouble fast: fractions, square roots or nested exponents have no clean equivalent in the usual vocabulary, and faking the result with spacing and <sup> produces a fragile result that a screen reader cannot connect together.
The <math> tag answers that gap. It does not belong to the HTML vocabulary itself: it is the root of a separate markup language, MathML, which the browser recognises and renders as soon as it meets it inside the page.
Definition
<math> is the root element of a formula written in MathML, a markup language dedicated to mathematical notation, the same way SVG is a markup language dedicated to vector drawings. Inside <math>, the usual HTML tags are set aside in favour of a specific vocabulary: mrow groups an expression, mfrac marks a fraction, msqrt marks a root, mi marks a variable, mn marks a number, mo marks an operator. The browser reads that structure and displays a properly laid out formula, with no image and no external script involved.
Syntax of a formula
A simple formula already shows the logic of the language: every visual symbol maps to a precise tag, nested according to the real mathematical structure of the expression, never according to how it merely looks on screen.
<math
><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
>This markup reproduces the formula for solving a quadratic equation. It looks verbose next to ordinary mathematical notation, but every tag carries a precise meaning that the browser can parse, render and pass on to an assistive technology, one mathematical word at a time.
Typical use and browser support limits
Few writers hand author MathML from scratch. Most mathematical content on the web comes from a converter that turns a LaTeX notation into MathML markup, or from a JavaScript library that builds that structure on the fly from a source formula. The end result still lands as native <math>, sitting directly inside the page.
Browser support has long been uneven. Firefox and Safari have rendered it natively for years, while Chrome and Chromium based browsers only added native support later on. On a project that still needs to work on older installed browser versions, checking the actual render stays worthwhile before relying on native support alone.
An image of a formula, a screenshot or an export from an equation editor, carries no information at all for a screen reader: the visitor hears only the word "image". A formula written in <math> stays structured content that an assistive technology can announce and step through element by element.
Facing an image or a plain exponent
Not every mathematical notation deserves <math>. For a lone exponent, a power or a footnote reference, the <sup> and <sub> tags are more than enough and stay far simpler to write. MathML earns its place once the formula carries a genuinely nested structure: a fraction, a root, a matrix, a system of equations.
Facing a complex formula, the temptation to drop in an image instead of MathML makes sense: it is fast, and the render looks guaranteed to match everywhere. The price is a total loss of meaning for assistive technology, and the impossibility of selecting or copying the content. The <object> and <embed> tags can embed an external MathML or SVG file, but they add an extra request and dependency where <math> stays directly readable inside the page's own code.
| Option | When to use it | Accessibility |
|---|---|---|
| <sup> or <sub> | A lone exponent or subscript, no nested structure | Good, native browser text |
Native <math> | A real formula with a fraction, root or matrix | Excellent, structured and announced |
| An image of the formula | Fallback, when nothing else is available | None, short of a very detailed alt text |
Frequently asked questions
No, in the vast majority of cases. Writers of scientific content go through a converter that turns a formula typed in LaTeX, or built in a visual editor, into MathML markup, or through a JavaScript library that produces that structure automatically as the page loads. The <math> tag mostly exists as the target of that conversion, rarely as an everyday input format.
<math> work in every current browser?The situation has improved a great deal in recent years: the major rendering engines now display MathML natively. Support in Chrome and Chromium based browsers still remains more recent than in Firefox or Safari. On a project that needs to cover older installed versions, testing the actual render stays a sensible precaution before relying on that native mechanism alone.
Because an image carries no usable meaning: a screen reader can neither read it nor announce it usefully, and a visitor can neither select nor copy its content. <math> keeps the formula as structured text, which makes it accessible, indexable and copyable, at the cost of a slightly more verbose markup to produce.