- HTML5 - Web RTC
- HTML5 - Web CORS
- HTML5 - Web Messaging
- HTML5 - IndexedDB
- HTML5 - Web Workers
- HTML5 - Drag & drop
- HTML5 - Microdata
- HTML5 - Geolocation
- HTML5 - Audio & Video
- HTML5 - Canvas
- HTML5 - WebSocket
- HTML5 - Server-Sent Events
- HTML5 - Web SQL Database
- HTML5 - Web Storage
- HTML5 - MathML
- HTML5 - SVG
- HTML5 - Web Forms 2.0
- HTML5 - Events
- HTML5 - Attributes
- HTML5 - Syntax
- HTML5 - Overview
- HTML5 - Home
HTML5 Demo
- HTML5 - Web slide Desk
- HTML5 - Web Worker
- HTML5 - Drag and Drop
- HTML5 - Geo-Location
- HTML5 - Video Players
- HTML5 - Audio Players
- HTML5 - Canvas
- HTML5 - Server Sent Events
- HTML5 - Web Storage
HTML5 Tools
- HTML5 - Color Code Builder
- HTML5 - Online Editor
- HTML5 - Validation
- HTML5 - Modernizr
- HTML5 - Validator.nu Validation
- HTML5 - QR Code
- HTML5 - Velocity Draw
- HTML5 - MathML
- HTML5 - SVG Generator
HTML5 Useful References
- HTML5 - Char Encodings
- HTML5 - Entities
- HTML5 - URL Encoding
- HTML5 - Fonts Reference
- HTML5 - Color Names
- HTML5 - Quick Guide
HTML5 Tag Reference
HTML5 Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
HTML5 - MathML
The HTML syntax of HTML5 allows for MathML elements to be used inside a document using <math>...</math> tags.
Most of the web browsers can display MathML tags. If your browser does not support MathML, then I would suggest you to use latest version of Firefox.
MathML Examples
Following is a vapd HTML5 document with MathML −
<!doctype html> <html> <head> <meta charset = "UTF-8"> <title>Pythagorean theorem</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>
This will produce the following result −
Using MathML Characters
Consider, following is the markup which makes use of the characters ⁢ −
<!doctype html> <html> <head> <meta charset = "UTF-8"> <title>MathML Examples</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>
This would produce the following result. If you are not able to see proper result pke x2 + 4x + 4 = 0, then use Firefox 3.5 or higher version.
This will produce the following result −
Matrix Presentation Examples
Consider the following example which would be used to represent a simple 2x2 matrix −
<!doctype html> <html> <head> <meta charset = "UTF-8"> <title>MathML Examples</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>
This will produce the following result −
This would produce the following result. If you are not able to see proper result, then use Firefox 3.5 or higher version.
Advertisements