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

When the HTML parser encounters an <svg> or <math> tag, it switches from the HTML namespace into a foreign namespace (SVG or MathML, respectively). Inside these foreign contexts, only elements defined by those specifications are valid. The HTML <img> element does not exist in the SVG or MathML namespaces, so placing it there causes a parsing conflict and triggers the W3C validator error: “HTML start tag img in a foreign namespace context.”

This matters for several reasons. Browsers handle this situation inconsistently — some may break out of the foreign namespace to render the <img>, while others may ignore it entirely or produce unexpected layout results. This inconsistency means your page may look correct in one browser but be broken in another. Beyond rendering issues, assistive technologies rely on proper namespace boundaries to interpret content. An <img> in the wrong namespace may lose its accessibility semantics, meaning the alt text could go unannounced to screen reader users.

How to fix it

The fix depends on which foreign namespace context contains the <img>:

Inside <svg>: Replace <img> with the SVG <image> element. Note that SVG’s <image> uses the href attribute (not src) and requires x, y, width, and height attributes for positioning and sizing. Unfortunately, SVG’s <image> element does not support an alt attribute directly — use a <title> child element or aria-label to provide an accessible name.

Inside <math>: Move the <img> outside the <math> element entirely, or place it inside an <mtext> element. The <mtext> element in MathML is designed to hold text content and, per the HTML parsing rules, can contain embedded HTML elements.

Examples

Incorrect: <img> inside <svg>

<svg width="200" height="200">
  <img src="diagram.png" alt="A diagram" width="200" height="200">
</svg>

Correct: using SVG <image> element

<svg width="200" height="200" role="img" aria-label="A diagram">
  <image href="diagram.png" x="0" y="0" width="200" height="200" />
</svg>

Correct: with an accessible name via <title>

<svg width="200" height="200" role="img" aria-labelledby="diagram-title">
  <title id="diagram-title">A diagram</title>
  <image href="diagram.png" x="0" y="0" width="200" height="200" />
</svg>

Incorrect: <img> inside <math>

<math>
  <img src="equation.png" alt="x squared plus one">
</math>

Correct: <img> inside <mtext> within <math>

<math>
  <mtext>
    <img src="equation.png" alt="x squared plus one">
  </mtext>
</math>

Correct: <img> moved outside <math>

<img src="equation.png" alt="x squared plus one">

Incorrect: mixed HTML content inside <svg>

<svg width="300" height="150">
  <rect width="300" height="150" fill="#eee" />
  <img src="icon.png" alt="Icon" width="32" height="32">
  <text x="50" y="80">Hello</text>
</svg>

Correct: using <image> alongside other SVG elements

<svg width="300" height="150">
  <rect width="300" height="150" fill="#eee" />
  <image href="icon.png" x="10" y="10" width="32" height="32" aria-label="Icon" />
  <text x="50" y="80">Hello</text>
</svg>

If you need to place HTML content alongside or on top of an SVG, consider using the <foreignObject> SVG element, which explicitly creates an HTML namespace context within SVG:

<svg width="300" height="150">
  <rect width="300" height="150" fill="#eee" />
  <foreignObject x="10" y="10" width="100" height="100">
    <img src="icon.png" alt="Icon" width="32" height="32">
  </foreignObject>
</svg>

The <foreignObject> approach is especially useful when you need full HTML capabilities — such as alt text on <img>, form controls, or rich text — inside an SVG graphic.

Learn more:

MDN Reference

MDN Web Docs: img element

→

WHATWG Spec

WHATWG HTML Living Standard: Embedded content - the img element

→

MDN Reference

MDN: the SVG image element

→