Explainer for the MathML <a> element

Current proposal and deprecated syntax

Consider this mathematical formula:

Γ(t)=∫0+∞xt−1e−xdx=1t∏n=1∞(1+1n)t1+tn∼2πt(te)t{\Gamma(t)} = {\int_{0}^{+\infty} x^{t-1} e^{-x} dx} = {\frac{1}{t} \prod_{n=1}^\infty \frac{\left(1+\frac{1}{n}\right)^t}{1+\frac{t}{n}} } \sim {\sqrt{\frac{2\pi}{t}} \left(\frac{t}{e}\right)^t}

Wrapping it in a a HTML's <a> element should make it a link, without affecting layout:

Γ(t)=∫0+∞xt−1e−xdx=1t∏n=1∞(1+1n)t1+tn∼2πt(te)t{\Gamma(t)} = {\int_{0}^{+\infty} x^{t-1} e^{-x} dx} = {\frac{1}{t} \prod_{n=1}^\infty \frac{\left(1+\frac{1}{n}\right)^t}{1+\frac{t}{n}} } \sim {\sqrt{\frac{2\pi}{t}} \left(\frac{t}{e}\right)^t}

Using MathML Core's <a> element, it's possible to create multiple links on subformulas. Again, the whole layout should however remain the same:

Γ(t)=∫0+∞xt−1e−xdx=1t∏n=1∞(1+1n)t1+tn∼2πt(te)t\href{https://en.wikipedia.org/wiki/Gamma_function}{\Gamma(t)} = \href{https://en.wikipedia.org/wiki/Gamma_function#Main_definition}{\int_{0}^{+\infty} x^{t-1} e^{-x} dx} = \href{https://en.wikipedia.org/wiki/Gamma_function#Euler's_definition_as_an_infinite_product}{\frac{1}{t} \prod_{n=1}^\infty \frac{\left(1+\frac{1}{n}\right)^t}{1+\frac{t}{n}} } \href{https://en.wikipedia.org/wiki/Asymptotic_analysis#Definition}{\sim} \href{https://en.wikipedia.org/wiki/Gamma_function#Stirling's_formula}{\sqrt{\frac{2\pi}{t}} \left(\frac{t}{e}\right)^t}

In MathML3, the href attribute was accepted on any MathML element. The following formula uses a deprecated <mrow href> link. Some browsers will support it (maybe with a warning message in the console) and others will completely ignore it:

∑n=1+∞1n2=π26{\sum_{n=1}^{+\infty} \frac{1}{n^2}} = \frac{\pi^2}{6}

MathML links in canvas

Consider the following mathematical formula, with a link to a page describing the magnetic field of a loop. This link will either match the :link or :visited pseudo-classes, so use a color different from the rest of the text, and that depends on your browsing history:

B⇀=μ0IR22(R2+z2)3/2𝐤{\color{#ff0000}\vec{B}} = \href{https://physicsbook.gatech.edu/Magnetic_Field_of_a_Loop}{\frac{\mu_0 I R^2}{2\left( R^2 + z^2 \right)^{3/2}} \mathbf{k}}

Wrapping MathML formulas in SVG images via the foreignObject enables some nice WebGL interactive 3D schemas:

However, user agents should implement proper mitigations to make sure this feature does not cause information leakage!

MathML links and tabindex

Below are two mathematical formulas written in HTML and MathML respectively. They contain integers "2", "3", "4", "5" wrapped in an element with tabindex value set to 2, 3, 4 and 5 respectively. This means they are sequentially focusable in this increasing order (typically using the tab key). The last items in this sequence are all the links in this page, which have tabindex equal to 0, including the two links for "π" below.

x2 + (1/5)½ + (π/4)3
x2+15+(π4)3x_2+\sqrt{\frac{1}{5}}+\left(\frac{\href{https://en.wikipedia.org/wiki/Pi}{\pi}}{4}\right)^3

WebIDL for MathML links

All MathML elements expose the MathMLElement class and support the corresponding global attributes, with the same semantics as HTML. For instance, all MathML elements support the tabindex attribute (as shown in the previous section) and the corresponding tabIndex getter/setter.

In MathML Core issue #325, we considers a specific interface for the <a> element.