44 CHAPTER 2 Getting started with HTML5
Lesson 2: Embedding content
Soon, you will want to embed content in your HTML document. The content might be from
an existing webpage, or you might embed images in your HTML document. You might also
embed Adobe Flash applications. You can embed many interesting elements, and this lesson
covers many of the ways to embed content.After this lesson, you will be able to:
■■Embed HTML documents in another HTML document by using inline frames.
■■Create hyperlinks to remote or local HTML documents.
■■Add images and image maps to the current HTML5 document.
■■Embed plug-in content.Estimated lesson time: 30 minutesEmbedding HTML by using inline frames
You can use the <iframe> element to embed an inline frame that contains an HTML docu-
ment within the current HTML document. This can be useful when you want to create reuse
functionality on your site; for example, when you want to create a common header that will
show on all pages of your website. This can also be useful when you want to include an HTML
page from another website on your page.
The <iframe> element creates a nested browser context into which another HTML
document can be loaded. Loading an HTML document creates a browsing context for that
document. The document that contains an <iframe> is contained within the parent browser
context, where the document that is loaded into the <iframe> element is within the nested
browser context.
You can navigate nested browsing contexts by using the following properties of the win-
dow object.
■■window.top A WindowProxy object representing the top-level browsing context
■■window.parent A WindowProxy object representing the parent browsing context
■■window.frameElement An element that represents the browsing context container
but returns null if there isn’t one
The <iframe> element has a src (source) attribute and a name attribute. The src attribute
can be set to the absolute or relative URL of the HTML document that you want to include, as
shown in the following sample.
<iframe src="menu.html"></iframe>The name attribute sets the browsing context name, which is useful when you need to
reference the <iframe> element, possibly as the target of a hyperlink, as described in the