A Beginner's Guide to MathML
Using MathML
Standalone
MathML is based on XML, hence it can be used on its own as a way of storing mathematical equations for distribution or as an input into other software (such as Mathmatica).
If this is how you intend to use MathML you should first remember to include the XML decleration, specifying the version and encoding in use. Then, the root <math> tag should also specify the MathML namespace with the 'xmlns' attribute. Conventionally such files are stored with a '.mml' extension, or less often '.xml'.
<?xml version="1.0" encoding="UTF-8" ?><math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mi>x</mi><mn>2</mn></msup></math>
Websites
Before using MathML in your website it's worth thinking about whether you users are going to be able to view it. I will discuss browser support briefly before the end.
Presently you have two main options: Firstly you can create your webpage in XHTML 1.1. If you do this you must use the 'XHTML + MathML + SVG' doctype, and the <math> element must again reference it's namespace with the 'xmlns' attribute.
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN""http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mi>x</mi><mn>2</mn></msup></math></body></html>
The future of web design now lies in HTML 5. HTML 5 includes MathML within its specification, making it an integral part of the standard. This allows us to include the <math> element without its namespace when used with the HTML 5 doctype:
<!DOCTYPE html><html><body><math><msup><mi>x</mi><mn>2</mn></msup></math></body></html>
If you are using XHTML 5, then the 'xmlns' is again required, but the DOCTYPE is optional.
<?xml version="1.0" encoding="utf-8"?><html xmlns="http://www.w3.org/1999/xhtml"><body><math xmlns="http://www.w3.org/1998/Math/MathML"><msup><mi>x</mi><mn>2</mn></msup></math></body></html>
Remember also, that any HTML document should be sent with MIME type 'text/html' and any XHTML document should be sent with 'application/xhtml+xml'.
Browsers
(Last updated February 2013)
Until recently support for MathML in in browsers has been pretty poor, with only Firefox offering anything worth looking at. But the recent addition of basic support in Safari and Chrome has begun to improve that situation.
You can try see how all the examples from this tutorial are rendered in your browser by visiting my MathML Browser Test which is an appendix to this tutorial.
Another useful resource is the MathML page on Can I Use…, which includes major mobile browsers too.
Before you get too depressed reading this, keep going afterwards to learn of how the current lack of browser support can be overcome.
Internet Explorer
All current versions of Internet Explorer (10 and below) have no support for MathML. Support can be added through the use of plugins, such as MathPlayer. The Internet Explorer team do seem to be working on supporting HTML 5, but there has been no mention of whether this will include MathML and I personally think it's unlikely to become a priority for them in the foreseable future
Firefox
Firefox has by far the best MathML support of any major browser. It's not perfect aesthetically, but almost all equations will be displayed correctly. If you want to view MathML this is the browser to do it in!
WebKit - Safari and Chrome
The Safari and Chrome browsers are both built on the WebKit layout engine which has recently added support for MathML. It is available in versions starting from Safari 5.1 and Chrome 24. It's a new feature and so not yet as good as Firefox - some things looks pretty ugly, some things don't work at all. But it's functional and has significantly broadened the number of people who can now view maths online!
Opera
Opera has basic support for MathML through a "CSS profile", which essentially means that it is using its normal layout mechanisms to approximate MathML layouts. It is far from perfect and far from complete, but it's better than nothing. Recent news that Opera is transitioning from it's own Presto renderer to WebKit means that it will soon fall in line with Chrome and Safari.
Prince XML
Ok, maybe it's not a browser, but Prince XML is an html renderer which outputs to PDF. It uses CSS for styling and will also display MathML - it's just like making a website except it renders paged PDFs instead. In terms of quality its current version (8.1) is a little short of Firefox but does a reasonably good job.
Using MathML Now
If you really want to use MathML in your website now but are concerned about the lack of browser support then you might want to check out MathJax.
MathJax is a JavaScript library which will layout any MathML in your website. It's freely available and supports all the major browsers. If you're wondering how well it works, all the examples in this tutorial were written in MathML and used MathJax. Of course, adding MathJax will increase the download weight of your page, and there is usually some short rendering delay. But it will allow you to get on writing MathML and let browser support catch up with you later.
Conclusion
That's it! You should now have a basic knowledge of the components of MathML and how to use them.
As I mentioned in the introduction, this is not an exhaustive tutorial and there are elements, attributes and stylings which have not been covered. If the thing you're looking for is not here that doesn't mean it's not possible in MathML. In fact, it almost certainly is possible.
There are not yet many MathML tutorials available on the internet. I wrote this as a way of teaching myself as I worked through the specification because I couldn't find any useful guides. If you want to see what else is available in MathML the specification is probaly the best place I can suggest, now that you have a grounding in it. Specifically, the chapter on presentational MathML. The Wikipedia article is also useful for staying up-to-date with support and development.
I hope this has been useful to you. I value constructive feedback, so please use the contact link on the menu if you have any thoughts.