Why is a self-closing iframe tag preventing further DOM elements to be displayed?

by

Because the iframe element isn’t a self-closing element. The versions of Firefox and Safari you’re using are treating the /> at the end as just > and assuming everything after it is contained within the iframe.

If we attempt to pass the code you’ve given through W3C’s validator we’ll see the following errors:

Error: Self-closing syntax (/>) used on a non-void HTML element. Ignoring the slash and treating as a start tag.

<iframe src="http://www.bing.com"/>

Error: End of file seen when expecting text or an end tag.

</html>

Error: Unclosed element iframe.

<iframe src="http://www.bing.com"/>

If you inspect your document with your browser’s Element Inspector, you’ll see what’s going on.

Chrome, which I’m using, converts the invalid <iframe ... /> to <iframe ...></iframe>:

Chrome Example

More Related Contents:

  1. Can multiple different HTML elements have the same ID if they’re different elements?
  2. Are iframes considered ‘bad practice’? [closed]
  3. Why does my XPath query (scraping HTML tables) only work in Firebug, but not the application I’m developing?
  4. How can I scale the content of an iframe?
  5. How to apply CSS to iframe?
  6. Alternative to iFrames with HTML5
  7. What characters are allowed in DOM IDs? [duplicate]
  8. HTML iframe – disable scroll
  9. How to get an IFrame to be responsive in iOS Safari?
  10. overlay opaque div over youtube iframe
  11. Make Iframe to fit 100% of container’s remaining height
  12. Accessing object in iframe using VBA
  13. Html code as IFRAME source rather than a URL
  14. Why are iframes considered dangerous and a security risk?
  15. Hide horizontal scrollbar on an iframe?
  16. IFRAMEs and the Safari on the iPad, how can the user scroll the content?
  17. Angular2, what is the correct way to disable an anchor element?
  18. Use of Iframe or Object tag to embed web pages in another
  19. What is shadow root
  20. Specifying content of an iframe instead of the src attribute to a page
  21. Some Elements missing while downloading from HttpWebRequest?
  22. How to force Iframe to run quirks under a standard parent frame
  23. What are the CSS properties that get elements out of the normal flow?
  24. Getting youtube.com to load in iFrame
  25. How to create valid HTML5 using frames?
  26. YouTube iframe embed – full screen
  27. Media queries not working inside an iframe
  28. z-index and iFrames!
  29. How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
  30. Is there a way to get the parent URL from an Iframe’s content?

Leave a Comment