MathML (Mathematical Markup Language) is a markup language supported in HTML5 that allows you to display mathematical notations on a webpage.
MathML is useful for scientific, educational, and academic content that requires mathematical expressions.
In this tutorial, we’ll cover:
- What is MathML?
- How to use MathML in HTML5.
- Basic MathML elements with examples.
- Advanced MathML examples for complex equations.
- Styling MathML content with CSS.
1. What is MathML?
MathML allows you to represent mathematical expressions as structured XML. It consists of tags and attributes that define how mathematical expressions are displayed. You can embed MathML directly into your HTML5 document using the <math> tag.
2. Embedding MathML in HTML5
MathML is supported in HTML5, and you can include it by using the <math> tag.
Example 1: A Simple MathML Expression
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple MathML</title>
</head>
<body>
<h1>MathML Example</h1>
<p>The equation for a circle is:</p>
<math>
<msup><mi>x</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>y</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>r</mi><mn>2</mn></msup>
</math>
</body>
</html>
Explanation:
- <math>: The container for the MathML content.
- <msup>: Superscript (e.g., x²).
- <mi>: Mathematical identifier (e.g., variable names like x or y).
- <mn>: Number (e.g., 2).
- <mo>: Operator (e.g., +, -, =).
3. Basic MathML Elements
MathML provides various tags for basic mathematical expressions like fractions, roots, and summations.
Example 2: Fractions and Roots
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fractions and Roots</title>
</head>
<body>
<h1>MathML - Fractions and Roots</h1>
<p>Here are some mathematical expressions:</p>
<p>1. Fraction:</p>
<math>
<mfrac>
<mi>a</mi>
<mi>b</mi>
</mfrac>
</math>
<p>2. Square Root:</p>
<math>
<msqrt>
<mi>x</mi>
</msqrt>
</math>
</body>
</html>
Explanation:
- <mfrac>: Represents fractions (e.g., a/b).
- <msqrt>: Represents square roots.
4. Advanced MathML Examples
MathML can represent more complex mathematical expressions, such as integrals, matrices, and summations.
Example 3: Summations and Integrals
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summations and Integrals</title>
</head>
<body>
<h1>MathML - Summations and Integrals</h1>
<p>1. Summation:</p>
<math>
<munderover>
<mo>∑</mo>
<mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow>
<mi>n</mi>
</munderover>
<mi>a</mi><mo>[</mo><mi>i</mi><mo>]</mo>
</math>
<p>2. Integral:</p>
<math>
<msubsup>
<mo>∫</mo>
<mn>0</mn>
<mn>∞</mn>
</msubsup>
<mi>e</mi><mo>^</mo><mo>-</mo><mi>x</mi><mo>dx</mo>
</math>
</body>
</html>
Explanation:
- <munderover>: Represents symbols with both lower and upper bounds (e.g., summation ∑).
- <msubsup>: Represents symbols with subscript and superscript (e.g., definite integral limits).
Example 4: Matrices
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Matrix Example</title>
</head>
<body>
<h1>MathML - Matrices</h1>
<p>Matrix Representation:</p>
<math>
<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>
</math>
</body>
</html>
Explanation:
- <mtable>: Represents a table for matrices.
- <mtr>: Defines a row in the matrix.
- <mtd>: Defines a cell in the matrix.
5. Combining Text and MathML
You can combine text with MathML using <math> inside paragraphs or other HTML elements.
Example 5: Inline MathML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inline MathML</title>
</head>
<body>
<h1>Inline MathML Example</h1>
<p>The quadratic formula is:
<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>
</p>
</body>
</html>
6. Styling MathML with CSS
You can style MathML elements using CSS to change fonts, colors, and alignment.
Example 6: Styling MathML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled MathML</title>
<style>
math {
font-family: "Times New Roman", serif;
color: darkblue;
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>Styled MathML Example</h1>
<p>The area of a circle is:
<math>
<mi>A</mi>
<mo>=</mo>
<mi>π</mi>
<msup><mi>r</mi><mn>2</mn></msup>
</math>
</p>
</body>
</html>
Explanation:
- The math tag is styled using CSS to change the font, color, and size of mathematical expressions.
7. Browser Support for MathML
- Most modern browsers like Firefox and Safari have good native support for MathML.
- Chrome and Edge have limited support but can use MathJax or similar libraries to render MathML.
8. MathML Accessibility
MathML is accessible and works well with screen readers, providing proper support for visually impaired users. Ensure semantic elements like <mi>, <mo>, and <mn> are used correctly for better accessibility.
Conclusion
In this tutorial, you learned:
- How to embed MathML in HTML5.
- Basic and advanced MathML elements, such as fractions, roots, summations, and matrices.
- How to style MathML with CSS for better presentation.
- Combining MathML with inline text for mathematical notations.
MathML is a powerful tool for creating rich, interactive mathematical content.