<math> en HTML : afficher une vraie formule mathématique dans la page

La balise <math> intègre une vraie formule mathématique, en MathML, directement dans une page HTML, lisible par un lecteur d'écran contrairement à une image.
5 min de lecture
Believemy logo

Une page de cours affiche une formule de résolution d'équation, un article scientifique montre une intégrale, une fiche de chimie détaille une réaction. Écrire ce genre de contenu en HTML ordinaire pose vite un problème : les fractions, les racines carrées ou les exposants imbriqués n'ont pas d'équivalent propre dans le vocabulaire habituel, et bricoler le résultat à coup d'espaces et de <sup> donne un rendu fragile, que rien ne relie entre eux pour un lecteur d'écran.

La balise <math> répond à ce manque. Elle n'appartient pas au vocabulaire HTML lui-même : c'est la racine d'un langage de balisage à part, MathML, que le navigateur reconnaît et met en forme dès qu'il la rencontre dans la page.


Définition

<math> est l'élément racine d'une formule écrite en MathML, un langage de balisage dédié aux notations mathématiques, de la même façon que SVG est un langage dédié aux dessins vectoriels. À l'intérieur de <math>, on n'utilise plus les balises HTML habituelles mais un vocabulaire spécifique : mrow pour regrouper une expression, mfrac pour une fraction, msqrt pour une racine, mi pour une variable, mn pour un nombre, mo pour un opérateur. Le navigateur interprète cet ensemble et affiche une formule correctement mise en forme, sans image ni script externe.


Syntaxe d'une formule

Une formule simple montre déjà la logique du langage : chaque symbole visuel correspond à une balise précise, imbriquée selon la structure mathématique réelle de l'expression, jamais selon sa seule apparence à l'écran.

HTML
<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
>

Cette écriture reproduit la formule de résolution d'une équation du second degré. Elle paraît verbeuse comparée à une notation mathématique classique, mais chaque balise porte un sens précis que le navigateur peut interpréter, mettre en forme et transmettre à une technologie d'assistance, mot mathématique par mot mathématique.


Usage typique et limites de prise en charge

Peu de rédacteurs écrivent du MathML entièrement à la main. La plupart des contenus mathématiques du web proviennent d'un convertisseur qui transforme une notation LaTeX en balisage MathML, ou d'une bibliothèque JavaScript qui produit cette structure à la volée à partir d'une formule source. Le résultat final reste néanmoins du <math> natif, directement présent dans la page.

La prise en charge par les navigateurs a longtemps été inégale. Firefox et Safari l'affichaient nativement depuis des années, tandis que Chrome et les navigateurs fondés sur Chromium n'ont ajouté un support natif que plus tard. Sur un projet qui doit rester compatible avec d'anciennes versions, une vérification reste utile avant de compter uniquement sur ce rendu natif.

Bon à savoir

Une image représentant une formule, capture d'écran ou export d'un éditeur d'équations, n'offre aucune information à un lecteur d'écran : l'utilisateur entend seulement le mot « image ». Une formule écrite en <math> reste un contenu structuré qu'une technologie d'assistance peut annoncer et parcourir élément par élément.


Face à une image ou à un simple exposant

Toutes les notations mathématiques ne justifient pas <math>. Pour un exposant isolé, une puissance ou une note de renvoi, les balises <sup> et <sub> suffisent largement et restent bien plus simples à écrire. MathML devient pertinent à partir du moment où la formule porte une vraie structure imbriquée : fraction, racine, matrice, système d'équations.

Face à une formule complexe, la tentation d'insérer une image plutôt que du MathML se comprend : c'est rapide, et le rendu paraît garanti identique partout. Le prix à payer est l'absence totale de sens pour une technologie d'assistance, et l'impossibilité de sélectionner ou de copier le contenu. Les balises <object> et <embed> permettent d'intégrer un fichier MathML ou SVG externe, mais elles ajoutent une requête et une dépendance supplémentaires là où <math> reste directement lisible dans le code même de la page.

SolutionQuand l'utiliserAccessibilité
<sup> ou <sub>Exposant ou indice isolé, sans structure imbriquéeBonne, texte natif du navigateur
<math> natifFormule réelle avec fraction, racine ou matriceExcellente, contenu structuré et annoncé
Image de la formuleCas de secours, faute d'autre solution disponibleNulle, sauf texte alternatif très détaillé


Questions fréquentes

QuestionFaut-il écrire le MathML entièrement à la main ?

Non, dans la grande majorité des cas. Les rédacteurs de contenu scientifique passent par un convertisseur qui transforme une formule saisie en LaTeX, ou composée dans un éditeur visuel, en balisage MathML, ou par une bibliothèque JavaScript qui produit cette structure automatiquement au chargement de la page. La balise <math> existe surtout comme cible de cette conversion, rarement comme format de saisie au quotidien.

Question<math> fonctionne-t-il dans tous les navigateurs actuels ?

La situation s'est nettement améliorée ces dernières années : les principaux moteurs de rendu affichent aujourd'hui MathML nativement. Le support de Chrome et des navigateurs fondés sur Chromium reste toutefois plus récent que celui de Firefox ou de Safari. Sur un projet qui doit couvrir d'anciennes versions installées, il reste prudent de tester le rendu réel avant de s'appuyer uniquement sur ce mécanisme natif.

QuestionPourquoi ne pas simplement insérer une image de la formule ?

Parce qu'une image ne transporte aucun sens exploitable : un lecteur d'écran ne peut ni la lire ni l'annoncer utilement, et son contenu ne peut être ni sélectionné ni copié par un visiteur. <math> garde la formule sous forme de texte structuré, ce qui la rend accessible, indexable et copiable, au prix d'une écriture un peu plus verbeuse à produire.

Termes connexes

Découvrez notre glossaire HTML et CSS

Parcourez les termes et définitions les plus couramment utilisés dans le domaine du développement HTML et CSS.

Partager cet article

Tu veux nous aider ? Fais un lien vers cet article sur tes réseaux ou encore mieux : sur ton site, dans un article ou dans ta newsletter.