# MathML Tags in HTML 5

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.

 If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

#### MathML Tags in HTML 5

Regular HTML code can be used to display mathematical symbols inline with other text using HTML Unicode characters (for which the Unicode math symbols reference may come in handy). HTML 5 also supports MathML, which is used to describe mathematical formulas using XML code. MathML not only determines how a formula is display, but also describes the actual calculation.

Here is an actual working demo of the MathML example code below.

$\underset{\text{attribute}}{\underbrace{\stackrel{\text{name}}{\overbrace{\mathrm{style}}}=\stackrel{\text{value}}{\overbrace{"font-weight: bold"}}}}$

Note: Since support for MathML depends on the browser and available fonts, the appearance of the MathML demo above varies greatly. In Firefox on Windows with the Fonts for MathML-enabled Mozilla installed, the MathML example code above looks like this:

(Since this is an image, the "attribute" link is not clickable.)

To install the MathML fonts in Windows 7, unzip the file then select all of the STIX*.otf files and drag/copy/drop them into the Fonts Page of the Control Panel.

#### MathML Tag Attributes

 global attributes The common HTML attributes can be used on any of the MathML tags.
##### Attributes of the [itex] tag
 `xmlns="http://www.w3.org/2000/svg"` The `xmlns` attribute declares the namespace for all of the MathML elements. Since the `xmlns` attribute is inherited by child elements and descendants, it does not need to be coded on other tags in the content of the `math` element, unless they are in a different namespace such as the HTML namespace. `mode="display"`
##### Attributes of the <mo> tag
 `form="prefix"` `form="postfix"`

#### MathML Examples

##### Diagram of attribute name and value with the various parts labeled

Here is an example of MathML code. The `xmlns` attribute on the `[itex]` tag sets the default namespace for all of its descendants. Since the names of any HTML elements need to be in the HTML namespace, the <a> tag for the attribute link must also include an `xmlns` attribute.

See MathML demo above for how this code looks in your browser.

```<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<munder>
<munder>
<mrow>
<mover>
<mover>
<mrow>
<mi style="font-family: Verdana, sans-serif">style</mi>
</mrow>
<mo style="font-size: smaller">&#xFE37;</mo>
</mover>
<mtext style="font-size: larger; font-weight: bold">name</mtext>
</mover>
<mo>=</mo>
<mover>
<mover>
<mrow>
<ms style="font-family: Verdana, sans-serif">font-weight: bold</ms>
<!-- <ms> automatically adds quotes -->
</mrow>
<mo style="font-size: smaller">&#xFE37;</mo>
</mover>
<mtext style="font-size: larger; font-weight: bold">value</mtext>
</mover>
</mrow>
<mo style="font-size: smaller">&#xFE38;</mo>
</munder>
<mtext style="font-size: larger; font-weight: bold">
<a href="../../attributes/index.html" xmlns="http://www.w3.org/1999/xhtml">attribute</a>
</mtext>
</munder>
</mrow>
[/itex]```

The styles of the `mi`, `mo` and `mtext` tags could be put into a CSS style sheet rather than coding the `style` attribute on each tag:

```@namespace mathml "http://www.w3.org/1998/Math/MathML"

mathml|mi {
font-family: Verdana, sans-serif;
}

mathml|mo {
font-size: smaller;
}

mathml|mtext {
font-size: larger;
font-weight: bold;
}```

Note: Since support for MathML depends on the browser and available fonts, the appearance of the code above varies greatly. In Firefox on Windows with the Fonts for MathML-enabled Mozilla installed, the MathML example code above looks like this:

(Since this is an image, the "attribute" link is not clickable.)

To install the MathML fonts in Windows 7, unzip the file then select all of the STIX*.otf files and drag/copy/drop them into the Fonts Page of the Control Panel.

##### The Quadratic Formula

Here is another example with some actual mathematical formulas:

This formula is used to calculate the roots of a quadratic equation ($a{x}^{2}bxc=0$):

$x=\frac{-b±\sqrt{{b}^{2}-4ac}}{2a}$

The first [itex] tag has `style="display: inline"` to display the quadratic equation inline with the text of the paragraph. The second MathML formula gives the solution to that equation.

```<p>This formula is used to calculate the roots of a quadratic equation
(<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML" style="display: inline">
<mrow><mi>a</mi><mo>⁢<!-- Unicode INVISIBLE TIMES --></mo><msup><mi>x</mi><mn>2</mn></msup>
<mo> </mo><mi>b</mi><mo>⁢<!-- Unicode INVISIBLE TIMES --></mo><mi>x</mi>
<mo> </mo><mi>c</mi><mo>=</mo><mn>0</mn></mrow>[/itex]):</p>

<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">−<!-- Unicode MINUS SIGN --></mo>
<mi>b</mi>
<mo>±<!-- Unicode PLUS-MINUS SIGN --></mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>−<!-- Unicode MINUS SIGN --></mo>
<mn>4</mn>
<mo>⁢<!-- Unicode INVISIBLE TIMES --></mo>
<mi>a</mi>
<mo>⁢<!-- Unicode INVISIBLE TIMES --></mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>⁢<!-- Unicode INVISIBLE TIMES --></mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
[/itex]```

#### Changes in HTML 5 - MathML

##### What's new in HTML 5

Support for MathML is one of the new features of HTML 5.

##### Differences between HTML 5 and earlier versions of HTML

MathML was not supported in older versions of HTML.

Valid HTML 5