HTML Tutorials - Herong's Tutorial Examples - v2.30, by Herong Yang
Adding MathML Formula in HTML5 Documents
This section provides a tutorial example of adding MathML formulas in HTML5 documents using 'math' tags.
MathML (Mathematical Markup Language) is an XML-based language that can be embedded in HTML documents to describe mathematical formulas.
To embed MathML formula into an HTML document, you should follow these guidelines:
1. Mathematical formulas described in MathML should be coded using the <svg xmlns="http://www.w3.org/1998/Math/MathML">> element with an optional attribute specifying the display style: display="inline/block".
2. Mathematical formulas should be described using MathML presentation components, not content components. Some commonly used MathML presentation components are: "mrow", "mstack", "mn", "mi", "mo", "msup", "mfrac", "msqrt", "ms", "mtext", etc.
3. MathML uses many special character entities defined in the Unicode standard to represent mathematical symbols and operators. Some entity examples are:
π (π) represents "Greek small letter pi" ⅇ (&ExponentialE) represents "the base for natural logarithms" ⅈ (&ImaginaryI) represents "i as the square root of -1" ∞ (∞ or &infty;) represents "infinity" ⁢ (⁢) represents "invisible times" operator ± represents "plus-or-minus" operator ∈ represents "element of" operator ∉ represents "not an element of" operator ∋ represents "contains as member" operator ∌ represents "does not contain as member" operator ∑ represents "n-ary summation" operator ∝ represents "proportional to" operator √ represents "square root" operator ∪ represents "union" operator ∫ represents "integral" operator
Here is a good example of using <math> tags in HTML documents:
<!DOCTYPE html> <!-- HTML5_MathML_Example.html - Copyright (c) 2014 HerongYang.com. All Rights Reserved. --> <html> <head><title>MathML Example</title></head> <body> <p> Given the quadratic equation <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>a</mi><mo>⁢</mo> <msup><mi>x</mi><mn>2</mn></msup> <mo>+</mo> <mi>b</mi><mo>⁢</mo><mi>x</mi> <mo>+</mo> <mi>c</mi> <mo>=</mo> <mi>0</mi> </mrow> </math> , the roots are given by <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo form="prefix">-</mo> <mi>b</mi><mo>±</mo> <msqrt> <msup><mi>b</mi><mn>2</mn></msup> <mo>-</mo> <mn>4</mn><mo>⁢</mo><mi>a</mi> <mo>⁢</mo><mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn><mo>⁢</mo><mi>a</mi> </mrow> </mfrac> </mrow> </math> . </p> </body> </html>
When the above HTML document is displayed in a Web browser, you will see two formulas in a paragraph of text:
Table of Contents
►Introduction of HTML5 Features
Differences between HTML5 and HTML 4
Adding Inline SVG Image in HTML5 Documents
►Adding MathML Formula in HTML5 Documents
"article" and "section" Elements
"header" and "footer" Elements
"details" and "summary" Elements
"figure" and "figcaption" Elements
HTML Document Structure and Content
HTML Document and Elements Syntax
Displayed and Printed HTML Documents
Responsive Design of Web Pages