MathML in HTML
The term MathML stands for Mathematical Markup Language. It was introduced in the year 2015 for embedding mathematical notation and chemical reaction equation into an HTML document. To embed MathML elements inside a web page, we use the HTML <math> tag.
MathML elements used in HTML
The following table contains a list of MathML elements used in HTML −
S.No. | Element & Description |
---|---|
1 | <math>It is the top level tag (root) of all MathML elements. |
2 | <mrow>It indicates row of a given table or matrix. |
3 | <msqrt>It displays square roots of a given expression. |
4 | <msub>It is used for adding subscript to a given expression. |
5 | <msup>It is used for adding superscript to a given expression. |
6 | <mo>It represents operators such as equal to, comma and so on. |
7 | <mi>It represents identifiers such as variable or constant. |
8 | <mtable>It is used for creating table or matrix. |
9 | <mtr>It is used for table row or matrix row. |
10 | <mtd>It is used to enter data in a cell of a table or a matrix. |
Example
Following is a valid HTML document with MathML −
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Pythagorean theorem</title></head><body><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><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></mrow></math></body></html>
Using MathML Characters
Consider, following is the markup which makes use of the characters −
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>MathML Examples</title></head><body><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mrow><msup><mi>x</mi><mn>2</mn></msup><mo>+</mo><mrow><mn>4</mn><mo></mo><mi>x</mi></mrow><mo>+</mo><mn>4</mn></mrow><mo>=</mo><mn>0</mn></mrow></math></body></html>
Matrix Presentation Examples
Consider the following example which would be used to represent a simple 2×2 matrix −
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>MathML Examples</title></head><body><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mi>A</mi><mo>=</mo><mfenced open="[" close="]"><mtable><mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd></mtr><mtr><mtd><mi>z</mi></mtd><mtd><mi>w</mi></mtd></mtr></mtable></mfenced></mrow></math></body></html>
Leave a Reply