HTML Iframes
An HTML iframe shows a web page inside another web page.
HTML Iframe Syntax
The <iframe> tag makes an inline frame, which embeds another document inside the current page.
Tip: Always include a title attribute on an <iframe>. Screen readers use it to describe the iframe's content.
Iframe syntax
The shape of an iframe.
<iframe src="url" title="description"></iframe>
Iframe - Set Height and Width
Use the height and width attributes to set the iframe's size (in pixels by default), or set them with the CSS height and width properties in the style attribute.
With attributes
An iframe sized with the height and width attributes.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Size Attrs</title>
</head>
<body>
<iframe src="demo_iframe.html" height="200" width="300" title="Iframe Example"></iframe>
</body>
</html>
With CSS
An iframe sized with CSS in the style attribute.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Size Style</title>
</head>
<body>
<iframe src="demo_iframe.html" style="height:200px;width:300px;" title="Iframe Example"></iframe>
</body>
</html>
Iframe - Remove the Border
By default an iframe has a border. Remove it with the CSS border property set to none, or use CSS to change the border's size, style, and color.
No border
An iframe with its border removed.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe No Border</title>
</head>
<body>
<iframe src="demo_iframe.html" style="border:none;" title="Iframe Example"></iframe>
</body>
</html>
Colored border
An iframe with a red border.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Colored Border</title>
</head>
<body>
<iframe src="demo_iframe.html" style="border:2px solid red;" title="Iframe Example"></iframe>
</body>
</html>
Iframe - Target for a Link
An iframe can be the target frame for a link. Set the link's target attribute to the iframe's name attribute, and the linked page loads inside the iframe.
Example
A link that loads its page inside a named iframe.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Target</title>
</head>
<body>
<iframe src="demo_iframe.html" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="https://prompt-cookbook.com" target="iframe_a">PromptCookbook</a></p>
</body>
</html>
Chapter Summary
To recap: the <iframe> tag makes an inline frame, the src attribute sets the page to embed, and you should always include a title for screen readers. The height and width attributes set its size, and border:none; removes the border.