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:

&#x03C0; (&pi;) represents "Greek small letter pi"
&#x2147; (&ExponentialE) represents "the base for natural logarithms"
&#x2148; (&ImaginaryI) represents "i as the square root of -1"
&#x221E; (&infin; or &infty;) represents "infinity"
&#x2062; (&InvisibleTimes;) represents "invisible times" operator
&#x00B1; represents "plus-or-minus" operator
&#x2208; represents "element of" operator 
&#x2209; represents "not an element of" operator 
&#x220B; represents "contains as member" operator 
&#x220C; represents "does not contain as member" operator 
&#x2211; represents "n-ary summation" operator
&#x221D; represents "proportional to" operator
&#x221A; represents "square root" operator
&#x222A; represents "union" operator
&#x222B; 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>&InvisibleTimes;</mo>
        <msup><mi>x</mi><mn>2</mn></msup>
     <mo>+</mo>
     <mi>b</mi><mo>&InvisibleTimes;</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>&PlusMinus;</mo>
       <msqrt>
        <msup><mi>b</mi><mn>2</mn></msup>
        <mo>-</mo>
        <mn>4</mn><mo>&InvisibleTimes;</mo><mi>a</mi>
          <mo>&InvisibleTimes;</mo><mi>c</mi>
       </msqrt>
      </mrow>
      <mrow>
       <mn>2</mn><mo>&InvisibleTimes;</mo><mi>a</mi>
      </mrow>
     </mfrac>
    </mrow>
   </math>
   .
  </p>
 </body>
</html>

When the above HTML document is displayed in Firefox 18, you will see two formulas in a paragraph of text:
HTML with MathML Example

Some other popular browsers like IE 10 and Chrome 28 are still not ready to support MathML tags yet.

Last update: 2014.

Table of Contents

 About This Book

 Introduction of HTML

Introduction of HTML5 Features

 What Is HTML5?

 Differences between HTML5 and HTML 4

 HTML5 DOCTYPE Declaration

 Adding Inline SVG Image in HTML5 Documents

Adding MathML Formula in HTML5 Documents

 "article" and "section" Elements

 "header" and "footer" Elements

 "nav" and "aside" Elements

 "details" and "summary" Elements

 "figure" and "figcaption" Elements

 "audio" and "video" Elements

 HTML Document Structure and Content

 HTML Document and Elements Syntax

 References

 PDF Printing Version