An inline framework can be defined with the <iframe> HTML tag. The <iframe> tag may appear anywhere in our document instead of somehow related to <frameset> tag. The <iframe> tag defines a rectangular area within the document where a separate document can be displayed, including boundaries and scrollbars. An inline frame can be used to incorporate another document into the current HTML document.
The src attribute uses the document's URL that occupies the inline frame.
Iframe Syntax
An HTML iframe is defined with the <iframe> tag:
<iframe src="URL">
</iframe>
The src attribute sets the URL of the inline frame page (Web address).
Iframe - Set Height and Width
To specify the iframe size, use the height and width attributes. The values for the attribute are default in pixes, but may be in percent (such as "80%").
Example:
We can specify the size of iframe with the height and width attributes:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>We can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="https://ukacademe.com" height="200" width="300"></iframe>
</body>
</html>
Output:
HTML Iframes
We can use the height and width attributes to specify the size of the iframe:
Or use CSS to define iframe height and width:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>The height and width properties of CSS can also be used to specify iframe size:</p>
<iframe src="https://ukacademe.com" style="height:200px;width:300px"></iframe>
</body>
</html>
Output:
HTML Iframes
The height and width properties of CSS can also be used to specify iframe size:
Iframe Remove the Border
The iframe has a border around it by default. Add the style attribute and use the border CSS property for removing the border:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<p>Use CSS to remove the iframe's default border:</p>
<iframe src="https://ukacademe.com" style="border:none;"></iframe>
</body>
</html>
Output:
Remove the Iframe Border
Use CSS to remove the iframe's default border:
We can modify the size, style and color of the border of the iframe with CSS:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<p>The iframe border can also be modified with CSS in size, style and colour:</p>
<iframe src="https://ukacademe.com" style="border:2px solid red;"></iframe>
</body>
</html>
Output:
Custom Iframe Border
The iframe border can also be modified with CSS in size, style and colour:
Iframe Target for a Link
The target frame of a link can be used by an iframe. The link's target attribute should be the iframe's name attribute:
Example:
The iframe opens the link when the target matches the iframe name.
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="#" name="iframe_a"></iframe>
<p><a href="https://ukacademe.com" target="iframe_a">UKAcademe.com</a></p>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
</body>
</html>
Output:
Iframe - Target for a Link
When the target of a link matches the name of an iframe, the link will open in the iframe.