HTML5 Advanced

Inline Frames

In this tutorial we learn how to define an inline window that holds another document.

The Inline Frame Element

The <iframe> tag and its' closing </iframe> tag are used to define an inline frame.

Pre HTML5, some text could be added between the opening and closing <iframe> tags as a fallback for when the <iframe> tag wasn't supported in a browser, this is no longer allowed and will cause an error when validating a HTML document.

Inline HTML Example


<iframe src="../htmlbasics/lotsofpies.html" srcdoc="<h1>h1 -The daddy of all headings, one per page.</h1>" width="300" height="400">
</iframe>

When both the src and srcdoc attributes are specified for the <iframe> tag the srcdoc attribute contents will be displayed if supported in the browser, otherwise the contents of the src attribute will be displayed if available and valid otherwise the <iframe> will remain blank.

Same Site Example

The example below is embedded in the page using a HTML document existing on the same site.


<iframe src="../htmlbasics/lotsofpies.html" width="300" height="400">
</iframe>



Different Site Example

The example below is embedded in the page so you can see an inline frame in real time and is a snapshot of the jQuery Reference - Attributes & Properties - .position() method taken from another of my tutorial sites.

The following html code is used to render an iframe inline in real time.


<iframe src="https://learnjavascript.co.uk/jq/reference/ap/position2.html" width="300" height="300">
</iframe>



Lesson 7 Complete

Try to create your own inline frames within a web page, using the other attributes for this tag shown in the reference section, to get used to using it.

Related Tutorials/Quizzes

Inline Frames Quiz

What's Next?

In the next lesson we take a final look at tables and their more advanced features.

HTML5 Reference

The <iframe> inline frame tag