HTML Paragraph

HTML - Iframes (Inline Frames)

An iframe (short for inline frame) is an HTML element that allows you to embed another webpage or content within the current page. It acts like a small window inside your webpage, displaying external or internal resources such as another HTML page, videos, maps, or documents.

Key Features of Iframes

Embed external pages: You can show another website inside your own page.
Embed internal pages: Useful for displaying content from your own website without reloading the whole page
Flexible sizing: The width and height can be customized.
Supports multimedia: You can embed YouTube videos, Google Maps, or PDFs easily.

Creating an <iframe> (Inline Frame) in HTML

Another webpage can be embedded within the current page by using an iframe (inline frame). It allows you to display external content like a website, video, map, or document without leaving the current page.

Basic Syntax

<!DOCTYPE html> <html> <head> <title>HTML Iframes Example</title> </head> <body> <p>This is an example of an HTML Iframe showing Learn Fast Code.</p>
<iframe src=https://www.learnfastcode.com/ width="600" height="400">
Sorry, your browser does not support inline frames.
</iframe>
</body> </html>

HTML <iframe> Attributes
S.No.	Attribute	Description
1	src	Specifies the URL or file name to load inside the iframe.
2	name	Assigns a name to the iframe, useful for targeting links to open in it.
3	height	Specifies the height of the iframe. Default is 150 pixels.
4	width	Specifies the width of the iframe. Default is 300 pixels.
5	allow	Defines permissions to access features like microphone or camera.
6	loading	Specifies when the iframe should be loaded (e.g., lazy loading).

Height and Width of Iframes

The height and width attributes in an iframe are used to control the size of the embedded frame on a webpage.

<!DOCTYPE html> <html> <head> <title>Iframe Height and Width Example</title> </head> <body> <h2>Iframe with Custom Size</h2> <iframe src="https://www.learnfastcode.com" height="400" width="600"> Sorry, your browser does not support iframes. </iframe> </body> </html>

Target and Name Attributes

The name and target attributes are used together to open links inside a specific iframe instead of loading them in the whole browser window.

name Attribute

The name attribute is added to the <iframe> to give it an identifier. This allows links to target that specific iframe.

target Attribute

The target attribute in a <a> (link) specifies where to open the link. When you set target="myFrame", the link will open inside the iframe that has the matching name.

<!DOCTYPE html> <html> <head> <title>Linking to an Iframe Example</title> </head> <body> <h3>Linking to an Iframe Example</h3> <iframe src="https://www.learnfastcode.com/" name="myFrame" width="600" height="400"></iframe> <br> <a href="https://www.learnfastcode.com/2025/08/html-colors-codes.html" target="myFrame">HTML Colors Code</a> | <a href="https://www.learnfastcode.com/2025/08/html-text-formatting.html" target="myFrame">HTML Text Formatting</a> </body> </html>

Styling Iframe

You can style an <iframe> just like other HTML elements using CSS. Styling iframes helps control their appearance, size, borders, and responsiveness.

<!DOCTYPE html> <html> <head> <title> Iframe Example</title> </head> <body> <iframe src="https://www.learnfastcode.com/" width="600" height="400" style="border:2px solid black; border-radius:10px;" > </iframe> </body> </html>

Multiple Iframes

In HTML, you can use multiple iframes on a single page to display different webpages or content sections simultaneously. Each <iframe> can load a unique URL or file, and you can style or size them individually.

<!DOCTYPE html>
<html>
<head>
<title>Styled Multiple Iframes</title>
<style>
/* Common style for all iframes */
iframe {
margin: 10px;
border-radius: 10px;
}

/* Specific style for the first iframe */
#iframe1 {
width: 400px;
height: 200px;
border: 2px solid blue;
}

/* Specific style for the second iframe */
#iframe2 {
width: 500px;
height: 250px;
border: 2px solid green;
}

/* Specific style for the third iframe */
#iframe3 {
width: 300px;
height: 150px;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>Multiple Iframes with Separate Styles</h2>

<iframe id="iframe1" src="https://www.learnfastcode.com/"></iframe>
<iframe id="iframe2" src="https://www.learnfastcode.com/2025/08/html-colors-codes.html"></iframe>
<iframe id="iframe3" src="https://www.example.com"></iframe>

</body>
</html>

HTML Iframes