Why Is a Self-Closing Iframe Tag Preventing Further Dom Elements to Be Displayed

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

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>:

Why do tags don't work when they are aligned below an iframe or object tag?

Because you didn't close your iframe tag, so all your subsequent content is within it (and ignored*, because the actual content of the iframe is taken from "learning.pdf").

Don't self-close it, either; it has to be accompanied by a proper </iframe>:

<iframe src="learning.pdf"></iframe>

<div>test<div>

<video controls>

    <source src="somevideo" type="video/webm">  

</video> 

When in doubt, validate your HTML.

---

* More accurately, it's treated as alternative content for browsers that don't support iframes.

iframe element hide my page below

You cannot use self-closing (<iframe ... />) tags with an iframe.

The / at the and is ignored and the <iframe> tag is still open, so your <p> tag is within your iframe.

You need to correctly close your iframe and use </iframe>

is there a reason why script has to have a separate closing tag?

why was it designed this way?

It must have an explicit end tag because you can have inline script:

<script>
    foo();
</script>

Having a forbidden end tag wouldn't work (since then you couldn't have content). Having an optional end tag would be more trouble then it is worth (since the element contains CDATA … that might actually make it impossible to have an optional end tag, I don't know that bit of SGML well enough to say).

It doesn't use <link> because it was a product of the browser wars and not something that was discussed in the W3C before being introduced.

It looks like this doesn't change in the HTML5 draft either.

It wouldn't be backwards compatible.

Why some non self-closing HTML elements that do not have a close tag (self closing) will not display these elements, but some do

Self-closing tags accompany void elements, which don't allow any content within them.

The void elements are <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <menuitem>, <meta>, <param>, <source>, <track> and <wbr>.

Consider <textarea> Text </textarea>. That is not self-closing, because it makes sense for it to contain content; the text the user inputs.

Conversely, consider <br />. That is self-closing, because it's a line break; there can never be anything between the start and end of a new line.

Void elements have an implied closing tag if omitted; you can safely leave it out when writing the tag. <br> is just as valid as <br />.

Omitting the closing tag of a non-void element will still work in some circumstances. In fact, there's a list of optional start and end tags, that covers things such as </body> and </head>. This is because you cannot have a valid HTML document with these tags omitted, and if you choose to omit them yourself, the parser will automatically attempt to place them in for you. Inspection with the F12 Debugger will reveal that these closing tags will be created automatically if omitted.

Obviously, this can be confusing for the parser, and it's much safer for you to add the tags in yourself. Otherwise, you may end up with invalid markup. You can test whether your markup is valid or not with the W3 Markup Validation service.

Hope this helps! :)

Adding Discord widget/iframe stops web page loading

iframe element isn't a self-closing element.

Try:
<iframe class="discord" src="https://discordapp.com/widget?id=201798443583143936&theme=dark"></iframe>

---

Related Topics