HTML MathML Embedding: Basic Mathematical Markup

MathML gives mathematical expressions a structure that assistive technologies and math-aware browsers can understand. It describes operators, identifiers, and relationships rather than simply drawing characters. Think about what the picture adds to the story, not just whether it looks nice on the screen.

What You Need to Know

For simple notation, sup and sub may be enough. MathML is more useful for expressions with real mathematical structure.

Pictures can make a page much easier to understand, but they are useful only when the file loads and the important meaning is also available as text.

Example: See It in Action

Here is a simple example to experiment with. Type it, save the file, and check what the browser displays.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<p>Einstein's equation:</p>
<math>
    <mi>E</mi>
    <mo>=</mo>
    <mi>m</mi>
    <msup><mi>c</mi><mn>2</mn></msup>
</math>

Let’s Understand the Example

A p groups a paragraph of related text. Start another paragraph for a new thought.
Math begins MathML markup for mathematical expressions.

Look for the text “Einstein's equation:” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.

What Should You See?

If the image file is available, the picture appears in the page. If not, the browser may show a broken image or fallback text. Check that the text alternative fits the picture’s purpose.

Cover the picture and read the surrounding text aloud. If essential information has disappeared, add a useful text alternative or nearby explanation.

Try It Yourself

Change the exponent from 2 to 3 and describe the new equation.
Save your changes, open or refresh the page, and compare the result with the original example.
Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

Using CSS positioning alone for a formula that readers need to understand semantically.
Never guess at an image description. Write alternative text that matches the picture and its purpose on this page.

Key Takeaways

MathML gives mathematical expressions a structure that assistive technologies and math-aware browsers can understand.
A p groups a paragraph of related text. Start another paragraph for a new thought.
For simple notation, sup and sub may be enough. MathML is more useful for expressions with real mathematical structure.