Inline FramesS2C Home « Inline Frames
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
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