HTML Foreign Content Rules for SVG and MathML

A small piece of HTML can change what a visitor sees or how the browser understands a page. In this lesson, you will explore foreign content rules for svg and mathml using a short example that you can inspect and change.

The Idea in Plain English

HTML can contain inline SVG and MathML. Their child tags use different namespaces and some different case-sensitivity and parser rules from ordinary HTML elements.

You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.

A Working Example

Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.

<svg viewBox="0 0 100 100" width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="teal" />
</svg>
<math>
    <mrow><mi>x</mi><mo>+</mo><mn>2</mn></mrow>
</math>

What Each Part Does

The svg element contains vector graphics rather than ordinary HTML markup.
The circle element draws a vector circle within SVG.
The math element marks mathematical content in MathML.
width reserves the image or embedded resource’s intended horizontal dimension.
height reserves the image or embedded resource’s intended vertical dimension.

A browser displays both a graphic and a mathematical expression when supported.

Keep the example small while learning. Once it behaves as expected, try it inside a larger page and make sure the URLs, files and surrounding HTML are correct.

Try It Yourself

Try this next: compare authored source against the DOM tree in DevTools focused on HTML Foreign Content Rules for SVG and MathML, including a working example and an incorrect example to correct. Then inspect the page and explain what changed.

Common Beginner Mistakes

Applying HTML-only tag rules blindly to SVG or MathML content.
Changing several parts of the example at once, making it difficult to see which part caused a different result.
Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.

Key Takeaways

HTML can contain inline SVG and MathML. Their child tags use different namespaces and some different case-sensitivity and parser rules from ordinary HTML elements.
A browser displays both a graphic and a mathematical expression when supported.
Test the markup in a browser, and check accessibility and real-world behavior where relevant.