HTML Iframes
An HTML iframe is used to display a web page within a web page.
HTML Iframe Syntax
The <iframe> HTML tag defines an inline frame, which serves the purpose of embedding another document within the existing HTML document.
Tip: Remember to consistently add a
title attribute to the <iframe>.
This helps screen readers describe the content within the iframe accurately.
Iframe - Set Height and Width
Utilize the height and width attributes to define the dimensions of the iframe.
By default, dimensions (height and width) are specified in pixels.
You can also enhance the <iframe> by adding the style attribute and utilizing the CSS height and width
properties:
Iframe - Remove the Border
By default, an iframe displays with a surrounding border.
For border removal, apply thestyle attribute and utilize the CSS
border property:
CSS enables you to modify the iframe's border size, style, and color:
Iframe - Target for a Link
An <iframe> can serve as the target frame for a hyperlink. The link's targetattribute should point to the iframe's name attribute.
Chapter Summary
- The
<iframe> HTML tag defines an inline frame.
- The
src
attribute specifies the URL of the page to be embedded.
- Remember to always add a
title attribute for screen readers.
- The
height and width attributes determine the dimensions of the iframe.
- To eliminate the border around the iframe, apply the style
border:none; to it.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<iframe style="width: 100%; min-height: 270px;" src="https://propertutorials.com/html/html-introduction" title="description"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can indicate the dimensions of the iframe by utilizing the height and width attributes:</p>
<iframe style="width: 100%; min-height: 270px;" src="https://propertutorials.com/html/html-introduction" height="500" width="1000" title="Iframe Example"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can specify the size of the iframe using CSS height and width properties.</p>
<iframe style="width: 100%; min-height: 270px;" src="https://propertutorials.com/html/html-introduction" style="height:200px;width:300px" title="Iframe Example"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<p>To get rid of the standard border around the iframe, apply the following CSS:</p>
<iframe style="width: 100%; min-height: 270px;" src="https://propertutorials.com/html/html-introduction" style="border:none;" title="Iframe Example"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<p> You can use CSS to modify the size, style, and color of the border of an iframe.</p>
<iframe style="width: 100%; min-height: 270px;" src="https://propertutorials.com/html/html-introduction" style="border:2px solid red;" title="Iframe Example"></iframe>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe style="width: 100%; min-height: 270px;" src="https://propertutorials.com/html/html-introduction" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p>
<a href="https://propertutorials.com/html" target="iframe_a">Propertutorials.com</a>
</p>
<p>When a link has its target attribute set to the same name as an iframe, clicking the link will open the linked content within that iframe.</p>
</body>
</html>
HTML
CSS
Javascript
Jquery