The following should look like the quadratic formula:
If it just looks like a single row of letters and numbers, MathML is not supported. Upgrade to a browser that does support it, such as Firefox or Safari.
The three tokens you will use most are <mi>, <mo> and <mn>. They represent identifiers, operators and numbers.
<math><mi>x</mi> <mo>+</mo> <mn>5</mn></math>
You can use special symbols as operators by writing out their entities, such as ± (±). You may also insert text into an expression using the <mtext> token.
<math><mtext>The speed of light:</mtext> <mi>c</mi> <mo>=</mo> <mn>299792458</mn> <mo rspace="thickmathspace">⁢</mo> <mi mathvariant="normal">m</mi><mo>/</mo><mi mathvariant="normal">s</mi></math>
The mathvariant property can change the look of a token. It is "normal" by default, except in <mi>, where it is "italic". We override it in this example, because units are written upright. For symbols that are spoken but not written, such as the multiplication sign (⁢) or the comma in subscripts (⁣), we use special entities. This is to ensure correct pronunciation by screen readers. Since InvisibleTimes has no width, we use rspace to add a space to the right of it.
Layout elements take a number of arguments, either tokens or other layout elements, and lay them out in a specific way.
<mrow>Lays its arguments out vertically. If a layout element only takes one argument, it's implicitly treated as one big mrow. Its use is like curly brackets in TeX.
<mfenced>Takes any number of arguments. Draws brackets around its content and separates each argument with a comma. It is functionally equivalent to writing <mo>(</mo> and <mo>)</mo>. You can choose which brackets and separator to use with the open, close, and separators attributes.
<mfrac>Takes two arguments, dividend and divisor.
<msup> / <msub> / <msubsup>Takes two arguments, one for the token being super/subscripted and the super/subscript itself.
<math><mfrac><mn>1</mn><mrow><mn>2</mn><mo>⁢</mo><mi>x</mi></mrow></mfrac> <mo>=</mo> <msup><mfenced><mrow><mn>2</mn><mo>⁢</mo><mi>x</mi></mrow></mfenced><mn>-1</mn></msup></math>
<msubsup> is a combination of <msub> and <msup>, with the first argument being the token being sub and superscripted, then the subscript and finally the superscript.
<mmultiscripts>Works similar to <msubsup>, but prescripts can be added after the separator <mprescripts/>. Takes either two or five arguments depending om the presence of the separator. Use <none/> to omit an argument.
<math><mmultiscripts><mtext>C</mtext><mn>2</mn><none/><mprescripts/><mn>12</mn><mn>6</mn></mmultiscripts></math>
<mover> / <munder> / <munderover>Works similarly to the sup/sub elements, but places its arguments directly above and/or below the base.
<math><munderover><mo>Σ</mo><mrow><mi>x</mi><mo>=</mo><mn>1</mn></mrow><mn>6</mn></munderover><msup><mi>x</mi><mn>2</mn></msup> <mo>=</mo> <mn>91</mn></math>
Symbols stretch to be as wide as the argument it's placed under.
<math><mover><mo>→</mo><mtext>oxidation</mtext></mover></math>
<msqrt> / <mroot><msqrt> takes a single argument, while <mroot> takes the index as a second argument.
<math><mroot><mn>27</mn><mn>3</mn></mroot> <mo>=</mo> <msqrt><mn>9</mn></msqrt></math>
<mtable> / <mtr> / <mtd><mtable> is analogous to HTML's <table> element. It contains rows (<mtr>) which contain cells (<mtd>).
<math><mfenced><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>2</mn></mtd></mtr><mtr><mtd><mn>3</mn></mtd><mtd><mn>4</mn></mtd></mtr></mtable></mfenced></math>
The <maction> element can add some interactivity to your expressions. It isn't required by the spec, so browser support can be lacking. Consider modifying the DOM with JavaScript instead to add more involved interactivity.
toggleCycles through its arguments on click. The selection paramater determines which of its arguments should be displayed initially.
<math><maction actiontype="toggle" selection="2"><mi>x</mi><mi>y</mi><mi>z</mi></maction></math>
tooltipShows some text on hover. Since tooltips usually can only cotain text, it is recommended to use only <mtext> as the second argument.
<math><mi>z</mi><mo>=</mo><maction actiontype="tooltip"><mi>r</mi><mtext>radius</mtext></maction><mo>⁢</mo><mi>cos</mi><mo>⁡</mo><maction actiontype="tooltip"><mi>θ</mi><mtext>inclination</mtext></maction></math>
statuslineSimilar to tooltip, but displays in the browser's status bar.
Using the href attribute, you can link math elements.
<math><mi>y</mi><mo>=</mo><mn>2</mn><mo>⁢</mo><mi href="#xdefinition">x</mi></math>
The spec is the ultimate reference guide for MathML. You may also want to visit the homepage of MathML.