HTML - Iframes

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

Syntax

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

URL or path of the external document is attached using the src attribute of <iframe> tag. If the content of 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. Always include a title attribute for the <iframe> that wwill help screen readers to read out what is the content provided in the iframe.

Examples of HTML iframes

Bellow exammples will illsutarte the usage of iframes, we have covered multiple examples to clarify the use cases of iframes where, when and how you can use it.

Creating an iframe

An inline iframe is used to embed an another document inside the current html document. Following is the example to show how to use the <iframe> in HTML.

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

Setting Height and Width of Iframes

To set height and width (dimension) of an HTML Iframe, we use the height and width attribute of <iframe> tag.

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

Removing border of Iframes

By default iframes carry border style within it, so we can remove that border using CSS border Property.

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

Iframe for a Hyperlink

To create a target Iframe for a hyperlink, we use the name attribute of <iframe> tag. The value of this attribute is used in the target attribute of elements like <form> and <a> to specify the target frame.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Iframes</title>
</head>
<body>
   <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"> 
      Sorry your browser does not support inline frames. 
   </iframe>
</body>
</html>
Advertisements