Although not directly a part of HTML5, the MathML is an important introduction to it. The Math ML or Mathematical Markup Language is, as its name says, a markup language. It is used to represent mathematical notations, calculations and formulas, by rounding the structure as well as the content.

The HTML5 allows us to add mathematical signs, symbols, and other related parameters, directly into an HTML document. To use the MathML language in HTML, one has to use the <math> element which let us utilize, besides calculus, conversions between different mathematical formats, as well as generating output formats for graphical and text displays, speech synthesizers and other media.

NOTE: MathML uses XML markup for presenting mathematical notations.

Syntax:

<math></math>

MathML variables

The Math markup language is initiated with the element <math>, but to really use it fully we have to add other elements that initiate different functionalities; the list below shows the elements of the MathML:

  • <mi></mi> - used as a container for variables
  • <mn></mn> - used as a container for numbers
  • <mo></mo> - used as a container for mathematical operators

NOTE: The elements <mn> and <mo> are allowed to contain several symbols, while the element <mi> is allowed to contain only one-letter variables.

MathML formulas, symbols, and characters

With MathML we can also use elements to explain formulas, constants and various mathematical symbols. The definition of each is written below:

Exponents and Indices

Expressions can be written as superscripts or subscripts by the elements <msup> for exponents and <msub> for indices. The example how to do so is here:

<msub>

   <mi>y</mi>

   <mn>0</mn>

</msub>

<mo>=</mo>

<msup>

   <mi>x</mi>

   <mn>2</mn>

</msup>

Functions and Bracketing Argument Lists

The MathML elements <mi>, <mo> and <mn> may be used to present functions, whether they are generic ones or standards mathematical functions such as sine, cosine or logarithm. For instance, the function definition: ℝ→[-1,1] , f(x) = sin x is written as:

<math>

   <mi>f</mi><mo>:</mo><mn>ℝ</mn><mo>→</mo><mn>[-1,1]</mn>

</math>

 

<math>

   <mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo>

   <mo>=</mo>

   <mi>sin</mi>

   <mi>x</mi>

</math>

Fractions

A fraction in MathML is generated by the element <mfrac>. For example, x y is generated as:

<mfrac>

   <mi>x</mi>

   <mi>y</mi>

</mfrac>

Root Expressions

In MathML the root symbol is generated by the element <msqrt>, as shown here:

<msqrt>

   <mrow>

      <mn>1</mn>

      <mo>-</mo>

      <mfrac>

         <mi>x</mi>

         <mn>2</mn>

      </mfrac>

   </mrow>

</msqrt>

Matrices

In MathML to write matrices we need the element <mfenced>, enclosing the table element <mtable>. For instance σy = 0 -i i 0 is generated as:

<msub><mn>σ</mn><mi>y</mi></msub>

<mo>=</mo>

<mfenced>

   <mtable>

      <mtr>

         <mtd><mn>0</mn></mtd>

         <mtd><mo>-</mo><mn>i</mn></mtd>

      </mtr>

      <mtr>

         <mtd><mn>i</mn></mtd>

         <mtd><mn>0</mn></mtd>

      </mtr>

   </mtable>

</mfenced>

Example

Examples with MathML element in a HTML 5 document:

 

›› go to examples ››