View Categories

HTML – Iframes

Table of Contents

An iframe is an inline frame used to embed another HTML document within the current page. With the <iframe> tag, you can display external content such as maps, videos, or even another website in a specified rectangular area of your web page.

Syntax

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

The src attribute defines the URL or the path of the document you want to display. The title attribute helps screen readers understand the content of the iframe, which is important for accessibility. If the content inside the iframe exceeds its specified dimensions, scrollbars will automatically appear.

Although iframes are versatile, using many of them can affect a website’s performance, so use them wisely.

Examples of HTML Iframes #

Here are a few examples demonstrating various use cases for iframes. We’ll show how you can control the iframe’s size, appearance, and behavior.

Creating an Iframe

An inline iframe is embedded within the HTML document using the <iframe> tag. The following example shows a basic iframe implementation:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <p>This is an example of an HTML Iframe:</p>
   <iframe src="/demo-content/index.html"> 
      Sorry, your browser does not support inline frames. 
   </iframe>
</body>
</html>

Setting Height and Width for Iframes

You can define the size of an iframe using the height and width attributes:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes - Dimensions</title>
</head>
<body>
   <p>Setting Height and Width of an Iframe:</p>
   <iframe src="/demo-content/index.html" width="500" height="300"> 
      Sorry, your browser does not support inline frames. 
   </iframe>
</body>
</html>

Removing the Border from an Iframe

By default, iframes may come with borders. You can remove this using the CSS border property:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes - Borderless</title>
</head>
<body>
   <p>Removing Border from Iframes:</p>
   <iframe src="/demo-content/index.html" width="500" height="300" style="border:none;"> 
      Sorry, your browser does not support inline frames. 
   </iframe>
</body>
</html>

Iframe as a Target for Hyperlinks

You can use an iframe as a target for hyperlinks by giving it a name attribute. Then, use this value in the target attribute of a link:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes - Hyperlink Target</title>
</head>
<body>
   <p>
      Click the link below to load content in the iframe:
   </p>
   <p>
      <a href="/demo-content/iframe-tutorial.html" target="demoIframe">
         Load Tutorial
      </a>
   </p>
   <iframe name="demoIframe" width="500" height="300" style="background-color: skyblue;"> 
      Sorry, your browser does not support inline frames. 
   </iframe>
</body>
</html>

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment