Scribd
Upload
20 views9 pages

HTML Iframes

The document provides a comprehensive guide on HTML iframes, detailing how to create and use them within web pages. It includes syntax, attributes, examples of setting height and width, linking to iframes, styling, and using multiple iframes. Additionally, it highlights the potential performance impact of using multiple iframes on a webpage.

Uploaded by

Silver Lily
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views9 pages

HTML Iframes

The document provides a comprehensive guide on HTML iframes, detailing how to create and use them within web pages. It includes syntax, attributes, examples of setting height and width, linking to iframes, styling, and using multiple iframes. Additionally, it highlights the potential performance impact of using multiple iframes on a webpage.

Uploaded by

Silver Lily
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Page 1 of 9

SQL HTML CSS Javascript Python Java C C++ PHP Scala C#

HTML - Iframes

Receive a free
gift now
Seal the steal with a free gift.

Temu

HTML iframe is an inline frame that allows you to embed another document within the current HTML
document. Whenever you want to display another webpage within the webpage, you can use an
iframe.

Creating iframe (Inline Frame)

In HTML, the inline frame is defined with the <iframe> tag. This tag creates a rectangular region at a
specified place within the HTML document in which the browser can display an external document
such as a map or another web page.

Iframe Syntax

The following is the syntax to create an inline frame (iframe) in HTML:

<iframe src="url" title="description"></iframe>

The src Attribute

The URL or path of the external document is attached using the src attribute of the <iframe> tag. If the
content of the iframe exceeds the specified rectangular region, HTML automatically includes the
scrollbars. HTML allows any number of iframes, but it may affect the performance of the website.
Page 2 of 9

Powered by:

Iframe Example

The following example demonstrates how you can create an iframe in HTML:

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>It is an example of HTML Iframe</p>
<iframe src="/html/menu.htm"> Sorry your browser does not support
inline frames. </iframe>
</body>
</html>

The <iframe> Tag Attributes

The following table describe the attributes used with the <iframe> tag.

S.No. Attribute & Description

src
This attribute is used to give the file name that should be loaded in the frame. Its value can
1
be any URL. For example, src="/html/top_frame.htm" will load an HTML file available in
html directory.
Page 3 of 9

name
This attribute allows to give a name to a specific frame. It is used to indicate which frame a
2 document should be loaded into. This is important when you want to create links in one
frame that load pages into an another frame, in which case the second frame needs a
name to identify itself as the target of the link.

height
3
This attribute specifies the height of <iframe>. By default it is 150 pixels.

width
4
This attribute specifies the width of <iframe>. By default it is 300 pixels.

allow
5 It is used to specify the permission policies to access features like microphone and
camera.

loading
6
It specifies the time to load a given iframe.

Setting Height and Width of Iframes

You can set the height and width of an HTML iframe by using the height and width attributes of
the <iframe> tag.

Example

The following example demonstrates how you can set the height and width of an iframe:

Open Compiler

<!DOCTYPE html>
<html>
Page 4 of 9

<head>
<title>HTML Iframes</title>
</head>
<body>
<h2>Example of Setting Height and width of HTML Iframe</h2>
<iframe src="/index.htm" width="500" height="300">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>

The above code will display the "index.htm" webpage in an iframe with the specified height and width.

Linking to an Iframe: Target and Name Attributes

You can use an iframe as a target frame to open a webpage on clicking a link.

You can create a target iframe for a link (hyperlink) by using the name attribute of the <iframe> tag.
The value of the name attribute is used in the target attribute of elements like <form> and <a> to
specify the target frame.

Example

The following example demonstrates how you can make a target iframe for a hyperlink:

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<h2>Linking to an Iframe: Target and Name Attributes</h2>
<p>Click on the link below to load the content inside the specified
frame...</p>
<p><a href="/html/html_iframes.htm" target="Iframe">
Iframe Tutorial
</a>
</p>
<iframe style="background-color: skyblue;" name="Iframe"
width="500" height="300">
Page 5 of 9

Sorry your browser does not support inline frames.


</iframe>
</body>
</html>

On execution, the above code will generate a link and an Iframe with a sky-blue background. When the
link is clicked, its content will open inside the iframe.

Styling Iframe

You can also use the style or class attributes to apply the CSS rules on an iframe.

Example

The following example demonstrates how you can apply CSS styles to an iframe:

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
<style type="text/css">
body{
background-color: #FFF4A3;
}
.my_iframe{
width: 90%;
height: 180px;
border: 2px solid #f40;
Page 6 of 9

padding: 8px;
}
</style>
</head>
<body>
<h2>Example of Styling Iframe</h2>
<iframe src="/index.htm" class="my_iframe">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>

Multiple Iframes

You can embed multiple documents (webpages) within a webpage. HTML allows you to use multiple
<iframe> tags in an HTML document.

Note: Use of multiple iframes may slow down your page loading speed.

Example

In the following example, we are embedding three webpages using multiple iframes:

Open Compiler

<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
<style type="text/css">
body{
background-color: #FFF4A3;
}
.my_iframe{
width: 90%;
height: 180px;
border: 2px solid #f40;
padding: 8px;
margin-bottom: 8px;
}
</style>
Page 7 of 9

</head>
<body>
<h2>Example of Multiple Iframes</h2>
<h3>Index Page</h3>
<iframe src="/index.htm" class="my_iframe">
Sorry your browser does not support inline frames.
</iframe>
<h3>Tutorials Library</h3>
<iframe src="/tutorialslibrary.htm" class="my_iframe">
Sorry your browser does not support inline frames.
</iframe>
<h3>Compilers</h3>
<iframe src="/codingground.htm" class="my_iframe">
Sorry your browser does not support inline frames.
</iframe>
</body>
</html>

TOP TUTORIALS

Python Tutorial

Java Tutorial
C++ Tutorial

C Programming Tutorial
C# Tutorial

PHP Tutorial
R Tutorial
HTML Tutorial

CSS Tutorial
JavaScript Tutorial

SQL Tutorial

TRENDING TECHNOLOGIES

Cloud Computing Tutorial


Amazon Web Services Tutorial

Microsoft Azure Tutorial


Git Tutorial
Page 8 of 9

Ethical Hacking Tutorial

Docker Tutorial
Kubernetes Tutorial
DSA Tutorial

Spring Boot Tutorial


SDLC Tutorial

Unix Tutorial

CERTIFICATIONS

Business Analytics Certification


Java & Spring Boot Advanced Certification

Data Science Advanced Certification


Cloud Computing And DevOps

Advanced Certification In Business Analytics


Artificial Intelligence And Machine Learning

DevOps Certification
Game Development Certification
Front-End Developer Certification

AWS Certification Training


Python Programming Certification

COMPILERS & EDITORS

Online Java Compiler


Online Python Compiler

Online Go Compiler
Online C Compiler
Online C++ Compiler

Online C# Compiler
Online PHP Compiler

Online MATLAB Compiler


Online Bash Compiler

Online SQL Compiler


Online Html Editor

ABOUT US | OUR TEAM | CAREERS | JOBS | CONTACT US | TERMS OF USE |

PRIVACY POLICY | REFUND POLICY | COOKIES POLICY | FAQ'S


Page 9 of 9

Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical
and non-technical subjects.

© Copyright 2025. All Rights Reserved.

You might also like