📖 Introduction 🔢 Éléments de base 📐 Fractions et racines 📈 Exposants et indices ➕ Opérateurs 📌 Accents et symboles 📊 Matrices 📝 Exemples complets 🌐 Support navigateurs

📖 1. Introduction à MathML

MathML (Mathematical Markup Language) est un langage XML permettant d'afficher des formules mathématiques complexes directement dans les pages web.

❌ Sans MathML

<!-- Image ou texte approximatif -->
<img src="formule.png" alt="x = (-b ± √(b²-4ac))/2a">

Images pixelisées, non adaptables, pas de zoom

✅ Avec MathML

<math>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
        <mrow><mo>-</mo><mi>b</mi><mo>±</mo><msqrt><
              ;msup><mi>b</mi><mn>2</mn></msup><mo>-</mo>
              <mn>4</mn><mi>a</mi><mi>c</mi></msqrt></mrow>
        <mrow><mn>2</mn><mi>a</mi></mrow>
    </mfrac>
</math>

Vectoriel, responsive, accessible

Précision

Rendu mathématique parfait

Responsive

S'adapte à tous les écrans

Accessibilité

Lu par les lecteurs d'écran

Impression

Qualité vectorielle

💡 Syntaxe de base : Toute formule MathML est encadrée par la balise <math></math>.

🔢 2. Éléments de base

<mi> – Identifiant

Variables mathématiques (x, y, α, β)

<mi>x</mi> → x
<mn> – Nombre

Constantes numériques

<mn>123</mn> → 123
<mo> – Opérateur

+, -, ×, ÷, =, <, >

<mo>+</mo> → +
<mrow> – Groupe

Regroupe des éléments

<mrow>x + y</mrow>

📝 Exemple : Expression simple

<math>
    <mi>a</mi>
    <mo>+</mo>
    <mi>b</mi>
    <mo>=</mo>
    <mi>c</mi>
</math>
✨ Rendu : a+b=c

📐 3. Fractions et racines

<mfrac> – Fraction

Numérateur / Dénominateur

<mfrac><mi>a</mi><mi>b</mi></mfrac> → ab
<msqrt> – Racine carrée
<msqrt><mi>x</mi></msqrt> → x
<mroot> – Racine n-ième
<mroot><mi>x</mi><mn>3</mn></mroot> → x3

📝 Exemple : Formule quadratique

<math>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
        <mrow>
            <mo>-</mo>
            <mi>b</mi>
            <mo>±</mo>
            <msqrt>
                <msup><mi>b</mi><mn>2</mn></msup>
                <mo>-</mo>
                <mn>4</mn>
                <mi>a</mi>
                <mi>c</mi>
            </msqrt>
        </mrow>
        <mrow>
            <mn>2</mn>
            <mi>a</mi>
        </mrow>
    </mfrac>
</math>
✨ Rendu : x=-b±b2-4ac2a

📈 4. Exposants et indices

<msup> – Exposant
<msup><mi>x</mi><mn>2</mn></msup> → x2
<msub> – Indice
<msub><mi>x</mi><mn>1</mn></msub> → x1
<msubsup> – Indice + Exposant
<msubsup><mi>x</mi><mn>1</mn><mn>2</mn>< /msubsup> → x12

📝 Exemple : Somme de i=1 à n

<math>
    <munderover>
        <mo>∑</mo>
        <mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
        <mi>n</mi>
    </munderover>
    <msub><mi>x</mi><mi>i</mi></msub>
</math>
✨ Rendu : ∑i=1nxi

➕ 5. Opérateurs

&plus; → +
&minus; → −
&times; → ×
&divide; → ÷
&equals; → =
&lt; → <
&gt; → >
&le; → ≤
&ge; → ≥
&ne; → ≠
&sim; → ∼
&approx; → ≈
&forall; → ∀
&exists; → ∃
&in; → ∈
&notin; → ∉

📝 Exemple : Inégalité

<math>
    <mi>x</mi>
    <mo>&le;</mo>
    <mi>y</mi>
    <mo>&lt;</mo>
    <mi>z</mi>
</math>
✨ Rendu : x≤y<z

📌 6. Accents et symboles spéciaux

&alpha; → α
&beta; → β
&gamma; → γ
&delta; → δ
&pi; → π
&theta; → θ
&lambda; → λ
&sigma; → σ
&omega; → ω
&infinity; → ∞
&partial; → ∂
&int; → ∫

📝 Exemple : Intégrale

<math>
    <msubsup>
        <mo>&int;</mo>
        <mn>0</mn>
        <mn>1</mn>
    </msubsup>
    <msup><mi>x</mi><mn>2</mn></msup>
    <mi>dx</mi>
</math>
✨ Rendu : ∫01x2dx

📊 7. Matrices

📝 Exemple : Matrice 2×2

<math>
    <mrow>
        <mo>[</mo>
        <mtable>
            <mtr><mtd><mn>1</mn></mtd><mtd><mn>2</mn><
            /mtd></mtr>
            <mtr><mtd><mn>3</mn></mtd><mtd><mn>4</mn><
            /mtd></mtr>
        </mtable>
        <mo>]</mo>
    </mrow>
</math>
✨ Rendu : [1234]

📝 Exemple : Déterminant

<math>
    <mrow>
        <mo>det</mo>
        <mo>(</mo>
        <mtable>
            <mtr><mtd><mi>a</mi></mtd><mtd><mi>b</mi><
            /mtd></mtr>
            <mtr><mtd><mi>c</mi></mtd><mtd><mi>d</mi><
            /mtd></mtr>
        </mtable>
        <mo>)</mo>
    </mrow>
</math>
✨ Rendu : det(abcd)

📝 8. Exemples complets

📌 Exemple 1 : Théorème de Pythagore

<math>
    <msup><mi>a</mi><mn>2</mn></msup>
    <mo>+</mo>
    <msup><mi>b</mi><mn>2</mn></msup>
    <mo>=</mo>
    <msup><mi>c</mi><mn>2</mn></msup>
</math>
✨ Rendu : a2+b2=c2

📌 Exemple 2 : Dérivée

<math>
    <mfrac>
        <mrow><mi>d</mi><mi>f</mi></mrow>
        <mrow><mi>d</mi><mi>x</mi></mrow>
    </mfrac>
    <mo>=</mo>
    <munder>
        <mi>lim</mi>
        <mrow><mi>h</mi><mo>→</mo><mn>0</mn></mrow>
    </munder>
    <mfrac>
        <mrow><mi>f</mi><mo>(</mo><mi>x</mi><mo>+<
            /mo><mi>h</mi><mo>)</mo><mo>-</mo><mi>f<
            /mi><mo>(</mo><mi>x</mi><mo>)</mo></mrow>
        <mi>h</mi>
    </mfrac>
</math>
✨ Rendu : dfdx=limh→0f(x+h)-f(x)h

📌 Exemple 3 : Produit scalaire

<math>
    <mover>
        <mi>u</mi>
        <mo>→</mo>
    </mover>
    <mo>⋅</mo>
    <mover>
        <mi>v</mi>
        <mo>→</mo>
    </mover>
    <mo>=</mo>
    <msup><mi>u</mi><mn>2</mn></msup>
</math>
✨ Rendu : u→·v→=u2

🌐 9. Support navigateurs

🌐

Chrome    ✅ Supporté

🦊 Firefox  ✅ Supporté
🧭 Safari   ✅ Supporté (partiel)
🌍 Edge    ✅ Supporté
⚡ Opera  ✅ Supporté
💡 Astuce : Pour une compatibilité maximale, utilisez <math display="block"> pour les formules en bloc.
<!-- Détection du support MathML -->
<script>
    if (!window.MathMLElement) {
        alert("Votre navigateur ne supporte pas MathML");
    }
</script>

📝 Tableau récapitulatif

Balise Description Exemple
<mi> Identifiant (variable) x, y, α
<mn> Nombre 123, 3.14
<mo> Opérateur +, -, ×, ÷, =
<mrow> Groupe Regroupe des éléments
<mfrac> Fraction a/b
<msqrt> Racine carrée √x
<msup> Exposant x²
<msub> Indice x₁
<mtable> Tableau (matrice) Matrice 2×2

📌 Quiz de vérification

Question 1 : Quelle balise utilise-t-on pour écrire une fraction ?

📖 Voir la réponse
✅ Réponse

<mfrac>numérateur</mfrac>dénominateur</mfrac>

Question 2 : Comment écrire x² en MathML ?

📖 Voir la réponse
✅ Réponse

<msup><mi>x</mi><mn>2</mn></msup>

Question 3 : Quelle balise permet de créer une matrice ?

📖 Voir la réponse
✅ Réponse

<mtable> avec <mtr> pour les lignes et <mtd> pour les cellules.

Question 4 : Comment obtenir le symbole π ?

📖 Voir la réponse
✅ Réponse

&pi; ou <mi>&pi;</mi>