Flash cards
Review the key moves
What is the main idea behind HTML Iframes?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
<___ src="Put the learning moves in the order that makes the concept easiest to apply.
An HTML iframe is used to display a web page within a web page.
HTML Iframe Syntax
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
Syntax
<iframe src="
url
" title="
description
"></iframe>Tip
It is a good practice to always include a title attribute for the <iframe> . This is used by screen readers to read out what the content of the iframe is.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default:
Example
<iframe src="demo_iframe.htm" height="200" width="300"
title="Iframe Example"></iframe>Live preview
Or you can add the style attribute and use the CSS height and width properties:
Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"
title="Iframe Example"></iframe>Live preview
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none;"
title="Iframe Example"></iframe>Live preview
With CSS, you can also change the size, style and color of the iframe's border:
Example
<iframe src="demo_iframe.htm" style="border:2px solid red;"
title="Iframe Example"></iframe>Live preview
Iframe - Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>
<p><a href="https://example.com target="iframe_a">ExampleSite.com</a></p>Live preview
Chapter Summary
- The HTML <iframe> tag specifies an inline frame
- The src attribute defines the URL of the page to embed
- Always include a title attribute (for screen readers)
- The height and width attributes specify the size of the iframe
- Use border:none; to remove the border around the iframe
HTML iframe Tag
| Tag | Description |
|---|---|
| <iframe> | Defines an inline frame |
For a complete list of all available HTML tags, visit our HTML Tag Reference .