MathML (Mathematical Markup Language) is a standard for representing mathematical notations in web pages. It is an XML-based markup language designed to integrate mathematical expressions into HTML and other markup languages. Here's an example of how to use MathML in an HTML5 document:
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MathML Example</title>
</head>
<body>
<h2>MathML Example</h2>
<!-- Example 1: Inline MathML -->
<p>Inline MathML: \(x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}\)</p>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="inline">
<mi>x</mi>
<mo>=</mo>
<mfrac linethickness="0">
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4ac</mn>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</math>
<!-- Example 2: Display MathML -->
<p>Display MathML:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<msup>
<mi>e</mi>
<mi>x</mi>
</msup>
<mo>=</mo>
<mi>y</mi>
</math>
</body>
</html>
In this example:
Inline MathML is used within a paragraph to represent the quadratic formula. The <math>
element with display="inline"
attribute is used to indicate inline mathematical content.
Display MathML is used within a paragraph to represent an exponential equation. The <math>
element with display="block"
attribute is used to indicate display-style mathematical content.
Note that browser support for MathML can vary, and some modern browsers may not fully support it. As an alternative, you might consider using MathJax or other JavaScript libraries that provide cross-browser rendering of mathematical equations. MathJax, for example, allows you to write equations in LaTeX syntax and renders them using MathML or other technologies depending on browser support.