HTML start tag “span” in a foreign namespace context.

A <span> element (or any HTML element) cannot appear directly inside an SVG or MathML element without first switching back to the HTML namespace.

SVG and MathML are foreign namespaces embedded within HTML documents. When the parser encounters an <svg> or <math> element, it switches to that element's namespace. Elements placed directly inside these foreign contexts are interpreted as belonging to that namespace, not as standard HTML elements. A <span> inside <svg>, for example, is not a valid SVG element, so the validator flags it.

To include HTML content within SVG, wrap it in a <foreignObject> element. The <foreignObject> element tells the parser to switch back to the HTML namespace, allowing standard HTML elements like <span>, <div>, or <p> inside it. You must give <foreignObject> a width and height so the browser knows how much space to allocate for the HTML content.

For MathML, the equivalent approach is to use the <mtext> element (or another MathML token element) and place the HTML content inside it. The HTML parser automatically switches back to the HTML namespace when it encounters HTML elements within MathML token elements like <mtext>, <mi>, or <mo>.

Invalid example

<svg width="200" height="200">
  <span>This text causes a validation error</span>
</svg>

Valid example using foreignObject

<svg width="200" height="200">
  <foreignObject x="10" y="10" width="180" height="180">
    <span>This text is valid inside foreignObject</span>
  </foreignObject>
</svg>

Valid example in MathML

<math>
  <mtext>
    <span>This text is valid inside mtext</span>
  </mtext>
</math>

Learn more:

MDN Reference

HTML Element: span

→

WHATWG Spec

HTML Parsing - Foreign Content

→

MDN Reference

SVG and MathML in HTML

→