MathML HTML
Basic Element Types
This is example demonstrates the usage of basic element types in MathML.
BasicElementTypes.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net's MathML: Basic Element Types</title>
<style>
code {
display:inline;
font-family:monospace;
background-color:beige;
color:olive;
}
math {
color:#808080;
}
</style>
</head>
<body>
<h1>Basic Elements</h1>
<ul>
<li>The <code><math></code> element is the containing element for all MathML expressions.</li>
<li>The <code><mn></code> element is used to designate literal numbers, such as <math><mn>4</mn></math>
or <math><mn>2.75</mn></math>, and typically rendered in a normal style with a special serif font.</li>
<li>The <code><mi></code> element is used to designate an identifier, such as <math><mi>sin</mi></math>
or <math><mi>x</mi></math>, and typically rendered in italics for single character variables.</li>
<li>The <code><mo></code> element is used to designate an operator such as <math><mo>+</mo></math>
or <math><mo>|</mo></math>.</li>
<li>The <code><mtext></code> element is used to designate short text inside an formula or statement,
such as <math><mtext>iff</mtext></math> or <math><mtext>therefore</mtext></math>.</li>
<li>The <code><ms></code> element is used to represent a string literal, such as
<math><ms>Hello World!</ms></math>, when the MathML is interpreted by programming languages and
computer algebra systems.</li>
<li>The <code><mspace></code> element adds space within an expression, using three parameters:
<b>depth</b>, <b>height</b>, and <b>width</b> to specify the space below the baseline, the space above the
baseline, and width of the space, respectively. For example, <math><mi>x</mi>
<mspace depth="10px" height="20px" width="40px"style="background: lightgray"></mspace><mi>y</mi></math>.</li>
<li>The <code><merror></code> element is used to display content as an error messages. For example,
<math><merror><mtext>An error</mtext></merror><mo>|</mo><mtext>Not an error</mtext></math></li>
<li>The <code><mrow></code> element is used to group together a set of elements so that they can be
treated as one by the container.</li>
<li>The <code><mfrac></code> element creates a fraction out of the two interior elements, while external
operators are stretched vertically to match its height.</li>
<li>The <code><msqrt></code> elementcreates a square root around the interior element.</li>
<li>The <code><mroot></code> element creates a root around the first interior element with the second
element designated as the fractional power.</li>
<li>The <code><mover></code>, <code><munder></code>, and <code><munderover></code> elements
are used to place symbols over, under, or both for special symbols like vectors, groupings, and summations.</li>
<li>The <code><msub></code>, <code><msup></code>, and <code><msubsup></code> elements are used
to place symbols as subscripts, superscripts, or both.</li>
<li>The <code><mtable></code>, <code><mtr></code>, and <code><mtd></code> elements are used to
create tables, row, and data elements for matrices or general layout control.<ul>
<li>The <code>columnspan</code> and <code>rowspan</code> attributes can be used to size internal elements,
much like standard tables.</li>
</li></ul>
<li>The <code><mmultiscripts></code> element allows for the place of subscripts and superscripts<ul>
<li>The addition of a <code><mprescripts></code> element allows subscripts and superscripts to be
placed before the main symbol:
<math><mmultiscripts><mi>C</mi><mi>w</mi><mi>x</mi>
<mprescripts /><mi>y</mi><mi>z</mi></mmultiscripts></math></li>
</ul></li>
<li>The <code><mstyle></code> element is used to designate the style of the set of contained elements:
<math><msqrt><mstyle mathcolor="red"><mfrac><mn>3</mn><mn>2</mn></mfrac></mstyle></msqrt></math>.<ul>
<li>Currently, all elements may be styled in this manner. So, this element functions much like the
<code><mrow></code> element to group elements.</li>
</ul></li>
<li>The <code><annotation></code>, <code><annotation-xml></code>, and <code><semantics></code>
elements are used to add presentation and content markup annotations and semantic meaning.</li>
</ul>
<h1>Stylistic Usage</h1>
<ul>
<li>Using <code><mo></code> versus <code><mtext></code> versus nothing for parentheses:
<math><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo></math> versus
<math><mi>f</mi><mtext>(</mtext><mi>x</mi><mtext>)</mtext></math> versus
<math><mi>f</mi></math>(<math><mi>x</mi></math>)</li>
<li><math>
<mfrac><mrow><mtext>Δ</mtext><mi>x</mi></mrow><mrow><mtext>Δ</mtext><mi>y</mi></mrow></mfrac>
</math> versus
<math>
<mfrac><mrow><mi>Δ</mi><mi>x</mi></mrow><mrow><mi>Δ</mi><mi>y</mi></mrow></mfrac>
</math>
versus <math><mfrac><mi>Δx</mi><mi>Δy</mi></mfrac></math></li>
<li><math><mo>|</mo><mfrac><mn>3</mn><mn>4</mn></mfrac><mo>|</mo></math> versus
<math><mtext>|</mtext><mfrac><mn>3</mn><mn>4</mn></mfrac><mtext>|</mtext></math></li>
<li><math><mo>|</mo><mi>x</mi><mo>|</mo></math> versus
<math><mtext>|</mtext><mi>x</mi><mtext>|</mtext></math> versus
|<math><mi>x</mi></math>|</li>
<li><math><mrow><mo>(</mo><mfrac linethickness="0"><mi>n</mi><mi>p</mi></mfrac><mo>)</mo></mrow></math> versus
<math>
<mo>(</mo><mtable><mrow><mtd><mi>n</mi></mtd></mrow><mrow><mtd><mi>p</mi></mtd></mrow></mtable><mo>)</mo>
</math></li>
<li><math><msqrt><mfrac><mn>3</mn><mi>x</mi></mfrac></msqrt></math> versus
<math><mroot><mfrac><mn>3</mn><mi>x</mi></mfrac><mn>5</mn></mroot></math></li>
<li>The effect of display="block"</li>
<div style="width:200px;padding:20px;">
<math display="block">
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover>
</math></div> versus
<math>
<munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover>
</math>
<li>Horizontal Stretching:
<math>
<mover><mrow><mi>x</mi><mo>+</mo><msub><mi>y</mi><mn>2</mn></msub></mrow><mo>→</mo></mover>
</math></li>
</ul>
<h1>Applying Tables</h1>
<ul>
<li>Function definitions:</li><math><mi>sgn</mi><mi>x</mi><mtext> </mtext><mo>:=</mo>
<mrow><mo>{</mo><mtable>
<mtr><mtd><mo>-</mo><mn>1</mn></mtd><mtd><mtext>if </mtext><mi>x</mi><mo><</mo><mn>0</mn></mtd></mtr>
<mtr><mtd><mn>0</mn></mtd><mtd><mtext>if </mtext><mi>x</mi><mo>=</mo><mn>0</mn></mtd></mtr>
<mtr><mtd><mn>1</mn></mtd><mtd><mtext>if </mtext><mi>x</mi><mo>></mo><mn>0</mn></mtd></mtr>
</mtable></mrow></math>
<li>Equation Derivations:</li><math><mtable>
<mtr>
<mtd><mn>1</mn><mo>+</mo><mn>2</mn><mo>+</mo><mn>3</mn><mo>+</mo><mi>…</mi><mo>+</mo><mi>n</mi></mtd>
<mtd><mo>=</mo></mtd>
<mtd style="text-align: left;"><mfrac><mi>n</mi><mn>2</mn></mfrac><mo>(</mo><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo>
<mtext>for </mtext><mi>n</mi><mtext> even.</mtext></mtd>
</mtr>
<mtr>
<mtd></mtd>
<mtd><mo>=</mo></mtd>
<mtd style="text-align: left;"><mfrac><mrow><mi>n</mi><mo>-</mo><mn>1</mn></mrow><mn>2</mn></mfrac>
<mo>(</mo><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo><mo>+</mo>
<mfrac><mrow><mi>n</mi><mo>+</mo><mn>1</mn></mrow><mn>2</mn></mfrac>
<mtext> for </mtext><mi>n</mi><mtext> odd.</mtext></mtd>
</mtr>
<mtr>
<mtd></mtd>
<mtd><mo>=</mo></mtd>
<mtd style="text-align: left;"><mfrac><mrow><mi>n</mi><mo>(</mo><mi>n</mi><mo>+</mo><mn>1</mn><mo>)</mo></mrow>
<mn>2</mn></mfrac><mtext> for either case.</mtext></mtd>
</mtr>
</mtable></math>
</ul>
</body>
</html>Output
© 2007–2025 XoaX.net LLC. All rights reserved.