Table of Contents

HTML Iframes

HTML Iframe is used to display a separate web page within a web page.

Iframe in HTML is a short for Inline Frame. An Inline frame is used to bed separate document with the current HTML document. The content inside an iframe may look completely different from the surrounding content. We can also say that iframe enough much acts like a mini web browser within a web browser.

Introductory syntax for adding an iframe to a web page:

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

If we replace the URL with “crus4.com” here is the output

Output

NOTE:- It is not mandatory to always include a title attribute for the <iframe>. But it is good practice to add a title attribute as it helps the users to read out what the content of the iframe is.

The src Attribute

The src Attribute of the HTML Iframe is used to specify the address of the document that are embedded to an <iframe> element.

Syntax:

<iframe src= "URL">

Attribute Values: Attribute value contains a single value which specifies the URL of the document to embed in the iframe. There are two possible values of the URL link:

i) Absolute URL:- Absolute URL points to another web page.

ii) Relative URL:- It points to other files within a web page.

Setting up width and height of an Iframe

We use height and width attributes to specify the height and width of an iframe.

Example

<iframe src = "pratice.html" height="300" width="400" 
</iframe>

NOTE:- Here the height and width are specified in pixels by default:

Remove the border – Iframe

We all know that an Iframe has a border around it. Here we add the style attribute and use the CSS border property to remove the border.

Example

<iframe src=" pratice.html"
style=" border:none;">
</iframe>

Tip:- We can also change the size, color and style of the Iframe’s border with the help of CSS.

Using Iframe as a target for a link

We can use an Iframe as the target frame for a link.

Example

<iframe
src = "pratice.html"
name = "link"
</iframe> 
<p> <a href= "https://crus4.com" target = "link">crus4.com</a> </p>

Note:- The target attribute of the link and the name attribute of the iframe must be equal.

Adding Multiple Iframes in an HTML document

We can also add multiple Iframes in a single HTML document. In a below example, we have set two iframes next to each other and name it first and second.

Example

<p> Let's add two iframes in a single HTML document.</p> 
<iframe src = "practice.html" name= "first"> </iframe> 
<iframe src = "practice.html" name =" second"> </iframe>

Summary

HTML Iframe is used to display a separate web page within a web page.
The src attribute specify the address of the document to embed.
Attribute height and width defines the size of an iframe.
We can remove the border of an iframe by using “border:none;”.
Target attribute of the link and the name of the iframe must be equal while using iframe as a target for a link.

Next…

Related Posts

Html inline and block elements

HTML Forms

Images in HTML

HTML Iframes – crus4