HTML MathML: keep mathematical meaning in the document

When the element earns its place

A shipping-cost policy includes a formula that reviewers must inspect beside the written rule. MathML expresses the numerator, division, and comparison as a structure rather than baking the expression into an image. Surround it with prose that defines the units and rounding policy; notation alone cannot explain whether a surcharge is calculated per parcel or per shipment. Test pronunciation with the assistive technology used by the audience.

<p>Surcharge equals declared value divided by 47, rounded under the policy.</p>
<math display="block" aria-label="surcharge equals declared value divided by forty-seven">
  <mrow>
    <mi>surcharge</mi><mo>=</mo>
    <mfrac><mi>declaredValue</mi><mn>47</mn></mfrac>
  </mrow>
</math>

Behavior boundary

This expression defines a relationship, not a complete billing rule. The application must implement rounding, currencies, and policy versioning in code. The verbal label offers one reading, while the structured expression remains available to supported readers.

Cost and operational limits

A short formula adds little transfer weight. Complex expressions add many nodes and require authoring review; an image may look simpler but loses structure and scales less cleanly.

Common Mistakes

• Do not use a formula image without an equivalent text explanation.
• Do not hide unit and rounding rules inside notation.
• Do not claim MathML executes the calculation.

Connected lessons

• HTML inline SVG: give a meaningful vector a name
• HTML figure and figcaption: keep an asset with its explanation
• HTML character references: escape data before inserting it into markup