The element “iframe” must not appear as a descendant of the “a” element.

The <iframe> element embeds an entirely separate HTML document within the current page, creating its own independent browsing context. The <a> element, on the other hand, is an interactive element designed to navigate users to a new URL or location. When you nest an <iframe> inside an <a>, browsers face a conflict: user interactions like clicks could be intended for the embedded content inside the iframe or for the link itself. The HTML specification resolves this ambiguity by simply disallowing it.

According to the WHATWG HTML living standard, the <a> element’s content model does not permit interactive content as descendants. The <iframe> element is categorized as interactive content, which means it must not appear anywhere inside an <a> tag — not as a direct child and not nested deeper within other elements inside the link.

This restriction matters for several reasons:

• Accessibility: Screen readers and assistive technologies cannot reliably convey the purpose of a link that contains an embedded document. Users may not understand whether they are interacting with the link or the iframe.
• Unpredictable behavior: Different browsers may handle clicks on the iframe-inside-a-link differently, leading to inconsistent user experiences.
• Standards compliance: Violating the content model makes your HTML invalid, which can cause unexpected rendering and behavior.

To fix the issue, restructure your markup so the <iframe> and <a> are siblings or otherwise separated. If your goal is to provide a link alongside embedded content, place the link before or after the iframe. If you want a clickable preview that links somewhere, consider using an image thumbnail inside the link instead of an iframe.

Examples

❌ Invalid: <iframe> inside an <a> element

<a href="https://example.com">
  <iframe src="https://example.com/embed"></iframe>
</a>

This triggers the validation error because the <iframe> is a descendant of the <a> element.

❌ Invalid: <iframe> nested deeper inside an <a> element

<a href="https://example.com">
  <div>
    <iframe src="https://example.com/embed"></iframe>
  </div>
</a>

Even though the <iframe> is not a direct child, it is still a descendant of the <a> element, which is not allowed.

✅ Valid: Separate the <iframe> and <a> elements

<a href="https://example.com">Visit Example.com</a>
<iframe src="https://example.com/embed"></iframe>

The link and the iframe are siblings, so there is no nesting conflict.

✅ Valid: Use an image as a clickable preview instead

If the intent is to create a clickable preview that links to a page, use a thumbnail image rather than an iframe:

<a href="https://example.com">
  <img src="preview-thumbnail.jpg" alt="Preview of Example.com">
</a>

✅ Valid: Wrap in a container with a separate link

If you need both an iframe and a related link displayed together, use a wrapper element:

<div class="embed-container">
  <iframe src="https://example.com/embed" title="Embedded content from Example.com"></iframe>
  <p><a href="https://example.com">Open Example.com in a new page</a></p>
</div>

Note that when using <iframe>, it’s good practice to include a title attribute to describe the embedded content for accessibility purposes.

Learn more:

MDN Reference

MDN - iframe

→