---
title: <math>
slug: Web/MathML/Element/math
translation_of: Web/MathML/Element/math
---
<p>{{MathMLRef()}}</p>
<p>The top-level element in MathML is <code><math></code>. Every valid MathML instance must be wrapped in <code><math></code> tags. In addition you must not nest a second <code><math></code> element in another, but you can have an arbitrary number of other child elements in it.</p>
<h2 id="Attributes">Attributes</h2>
<p>In addition to the following attributes, the <code><math></code> element accepts any attributes of the {{ MathMLElement("mstyle") }} element.</p>
<dl>
<dt id="attr-class-id-style">
class, id, style</dt>
<dd>
Provided for use with <a href="/en-US/docs/CSS">stylesheets</a>.</dd>
<dt id="attr-dir">
dir</dt>
<dd>
<span class="hidden"> </span>Overall directionality of formulas. Possible values are either <code>ltr</code> (left to right) or <code>rtl</code> (right to left).</dd>
<dt id="attr-href">
href</dt>
<dd>
Used to set a hyperlink to a specified URI.</dd>
<dt id="attr-mathbackground">
mathbackground</dt>
<dd>
The background color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd>
<dt id="attr-mathcolor">
mathcolor</dt>
<dd>
The text color. You can use <code>#rgb</code>, <code>#rrggbb</code> and <a href="/en-US/docs/CSS/color_value#Color_Keywords">HTML color names</a>.</dd>
<dt id="attr-display">
display</dt>
<dd>
This enumerated attribute specifies how the enclosed MathML markup should be rendered. It can have one of the following values:
<ul>
<li><code>block</code>, which means that this element will be displayed outside the current span of text, as a block that can be positioned anywhere without changing the meaning of the text;</li>
<li><code>inline</code>, which means that this element will be displayed inside the current span of text, and cannot be moved out of it without changing the meaning of that text.</li>
</ul>
<p>If not present, its default value is <code>inline</code>.</p>
</dd>
<dt id="attr-mode">
mode {{ deprecated_inline() }}</dt>
<dd>
Deprecated in favor of the <a href="/en-US/docs/MathML/Element/math#attr-display">display attribute</a>.<br>
Possible values are: <code>display</code> (which has the same effect as <code>display="block"</code>) and <code>inline</code>.</dd>
<dt id="attr-overflow">
overflow</dt>
<dd>
Specifies how an expression behaves if it is too long to fit in the allowed width.<br>
Possible values are: <code>linebreak</code> (default), <code>scroll</code>, <code>elide</code>, <code>truncate</code>, <code>scale</code>.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p><img alt="Theorem of Pythagoras" src="/files/3157/math.jpg"></p>
<h3 id="HTML5_notation">HTML5 notation</h3>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>MathML in HTML5</title>
</head>
<body>
<math>
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
</body>
</html>
</pre>
<h3 id="XHTML_notation">XHTML notation</h3>
<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MathML in XHTML</title>
</head>
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mrow>
<msup>
<mi>a</mi>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
</mrow>
<mo>=</mo>
<msup>
<mi>c</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
</body>
</html></pre>
<p><strong>Notes</strong>: XHTML documents with MathML must be served as <code>application/xhtml+xml</code>. You can achieve that easily by adding the <code>.xhtml</code> extension to your local files. For Apache servers you can <a class="external" href="http://httpd.apache.org/docs/2.2/mod/mod_mime.html#addtype">configure your <code>.htaccess</code> file</a> to map extensions to the correct Mime type. Since you notate your MathML in an XML document, also be sure you write a well-formed XML document.</p>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>XHTML notation</td>
<td>{{ CompatNo() }} (24 only)</td>
<td>{{ CompatGeckoDesktop("1.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>9.5</td>
<td>5.1</td>
</tr>
<tr>
<td>HTML5 notation</td>
<td>{{ CompatNo() }} (24 only)</td>
<td>{{ CompatGeckoDesktop("2.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>5.1</td>
</tr>
<tr>
<td><code>dir</code></td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatGeckoDesktop("12.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td><code>href</code></td>
<td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
<td>{{ CompatGeckoDesktop("7.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }} {{webkitbug(85733)}}</td>
</tr>
<tr>
<td><code>mathbackground</code></td>
<td>{{ CompatNo() }} (24 only)</td>
<td>{{ CompatGeckoDesktop("2.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>5.1</td>
</tr>
<tr>
<td><code>mathcolor</code></td>
<td>{{ CompatNo() }} (24 only)</td>
<td>{{ CompatGeckoDesktop("2.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>5.1</td>
</tr>
<tr>
<td><code>overflow</code></td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>XHTML notation</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td>HTML5 notation</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatGeckoMobile("2.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td><code>dir</code></td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatGeckoMobile("12.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td><code>href</code></td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatGeckoMobile("7.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td><code>mathbackground</code></td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatGeckoMobile("2.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td><code>mathcolor</code></td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatGeckoMobile("2.0") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td><code>overflow</code></td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Gecko-specific_notes">Gecko-specific notes</h3>
<p>Gecko 7.0 {{ geckoRelease("7.0") }} introduced support for accepting all MathML attributes on the top-level math element (i.e. the same behavior as a {{ MathMLElement("mstyle") }} element). However, the <code>displaystyle</code> attribute was not taken into account and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=669719">has been added</a> in Gecko 8.0 {{ geckoRelease("8.0") }}.</p>
<p>A textual fall-back (<code>alttext</code>) or referring to an alternative image using the attributes <code>altimg</code>, <code>altimg-width</code>, <code>altimg-height</code> or <code>altimg-valign</code> is currently not implemented in Gecko.</p>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('MathML3', 'chapter2.html#interf.toplevel', 'The Top-Level math Element') }}</td>
<td>{{ Spec2('MathML3') }}</td>
<td>Current specification</td>
</tr>
<tr>
<td>{{ SpecName('MathML2', 'chapter7.html#interf.toplevel', 'The Top-Level math Element') }}</td>
<td>{{ Spec2('MathML2') }}</td>
<td>Initial specification</td>
</tr>
</tbody>
</table>
<h2 id="See_also">See also</h2>
<ul>
<li>HTML top-level element: {{ HTMLElement("html") }}</li>
<li>SVG top-level element: {{ SVGElement("svg") }}</li>
<li>MathML browser test: For <a class="link-https" href="https://www.eyeasme.com/Joe/MathML/MathML_browser_test">XHTML</a> and <a class="link-https" href="https://eyeasme.com/Joe/MathML/HTML5_MathML_browser_test">HTML5</a></li>
</ul>