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 a Web browser, you will see two formulas in a paragraph of text:

HTML with MathML Example
HTML with MathML Example

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

 Displayed and Printed HTML Documents

 Responsive Design of Web Pages

 MathML Integration in HTML Documents

 References

 Full Version in PDF/EPUB