English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Basic Tutorial

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 MathML

HTML5 You can use MathML elements in the document, the corresponding tags are <math>...</math>./math> . MathML is a mathematical markup language, a standard based on XML (a subset of the Standard Generalized Markup Language), used to write mathematical symbols and formulas on the Internet.

Note: Most browsers support MathML tags. If your browser does not support this tag, you can view it using the latest version of Firefox or Safari.

MathML Example

Here is a simple MathML example:

<!DOCTYPE html>
<html>
　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title>Basic Tutorial Website(oldtoolbag.com)/title>
　　　</head>
　　　　
　　　<body>
　　　　
　　　　　　<math xmlns="http://www.w3.org/1998/Math/MathML">
　　　　　　　　
　　　　　　　　　<mrow>
　　　　　　　　　　　　msup><mi>a</mi><mn>2</mn></msup>
　　　　　　　　　　　　<mo>+</mo>
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　msup><mi>b</mi><mn>2</mn></msup>
　　　　　　　　　　　　<mo>=</mo>
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　msup><mi>c</mi><mn>2</mn></msup>
　　　　　　　　　</mrow>
　　　　　　　　　　　　
　　　　　　</math>
　　　　　　　　
　　　</body>
</html>
Test and see ‹/›

runtime result diagram, as shown below:

The following example adds some operators:

<!DOCTYPE html>
<html>
　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title>Basic Tutorial Website(oldtoolbag.com)/title>
　　　</head>
　　　　
　　　<body>
　　　　
　　　　　　<math xmlns="http://www.w3.org/1998/Math/MathML">
　　　　　　　　
　　　　　　　　　<mrow>　　　　　　　　　　　　
　　　　　　　　　　　　<mrow>
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　msup>
　　　　　　　　　　　　　　　　　　<mi>x</mi>
　　　　　　　　　　　　　　　　　　<mn>2</mn>
　　　　　　　　　　　　　　　</msup>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<mo>+</mo>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<mrow>
　　　　　　　　　　　　　　　　　　<mn>4</mn>
　　　　　　　　　　　　　　　　　　<mo>⁢</mo>
　　　　　　　　　　　　　　　　　　<mi>x</mi>
　　　　　　　　　　　　　　　</mrow>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　<mo>+</mo>
　　　　　　　　　　　　　　　<mn>4</mn>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　</mrow>
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　<mo>=</mo>
　　　　　　　　　　　　<mn>0</mn>
　　　　　　　　　　　　　　　　　
　　　　　　　　　</mrow>
　　　　　　</math>
　　　　　　　　
　　　</body>
</html>
Test and see ‹/›

runtime result diagram, as shown below:

The following example is a 2×2 Matrix:

<!DOCTYPE html>
<html>
　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title>Basic Tutorial Website(oldtoolbag.com)/title>
　　　</head>
　　　　
　　　<body>
　　　　　　<math xmlns="http://www.w3.org/1998/Math/MathML">
　　　　　　　　
　　　　　　　　　<mrow>
　　　　　　　　　　　　<mi>A</mi>
　　　　　　　　　　　　<mo>=</mo>
　　　　　　　　　　　　
　　　　　　　　　　　　<mfenced open="[" close="]">
　　　　　　　　　　　　
　　　　　　　　　　　　　　　<mtable>
　　　　　　　　　　　　　　　　　　<mtr>
　　　　　　　　　　　　　　　　　　　　　<mtd><mi>x</mi></mtd>
　　　　　　　　　　　　　　　　　　　　　<mtd><mi>y</mi></mtd>
　　　　　　　　　　　　　　　　　　</mtr>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　<mtr>
　　　　　　　　　　　　　　　　　　　　　<mtd><mi>z</mi></mtd>
　　　　　　　　　　　　　　　　　　　　　<mtd><mi>w</mi></mtd>
　　　　　　　　　　　　　　　　　　</mtr>
　　　　　　　　　　　　　　　</mtable>
　　　　　　　　　　　　　　　
　　　　　　　　　　　　</mfenced>
　　　　　　　　　</mrow>
　　　　　　</math>
　　　　　　
　　　</body>
</html>
Test and see ‹/›

Running results as shown below, this will generate the following results. If you cannot see the correct results, please use FireFox 3.7 or higher version:

HTML5 Drag and DropHTML5 Inline SVG