HTML

HTML

πŸ“Œ What is <iframe> ?

The <iframe> (inline frame) is used to embed another web page inside a web page.

  1. πŸ‘‰ In other words :

  2. You open a separate page inside your page
  3. It works like a β€œpage within a page”

Examples:

HTML
<iframe src="https://example.com"></iframe>

  1. πŸ”Ή Important attributes :

  2. src β†’ The URL of the page to display
  3. title β†’ A description for accessibility (very important!)
  4. πŸ‘‰ These two attributes are generally used for styling with CSS.

πŸ‘‰ Using the title attribute is considered a best practice.

πŸ“ Setting Height and Width

You can adjust the size of the iframe:

Using HTML:

HTML
<iframe src="demo.html" height="200" width="300"></iframe>

Using CSS:

HTML
<iframe src="demo.html" style="height:200px; width:300px;"></iframe>

🎨 Border (Frame) Settings

By default, iframes have a border.

To remove it:

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

To customize it:

HTML
<iframe src="demo.html" style="border: 2px solid red;"></iframe>

πŸ”— Opening Links Inside an Iframe

You can make links open inside the iframe instead of changing the main page.

How to do it?

1. Give the iframe a name:

HTML
<iframe name="frame1"></iframe>

2. Use target in the link:

HTML
<a href="https://example.com" target="frame1">Open</a>

  1. πŸ‘‰ Result:

  2. Clicking the link does not change the main page
  3. The content loads inside the iframe

  • 🧠 Summary (Key Points)

  • </iframe> β†’ embeds another page inside your page
  • src β†’ specifies the content to display
  • title β†’ important for accessibility
  • height & width β†’ control the size
  • border β†’ can be removed or customized
  • name + target β†’ allows links to open inside the iframe

Html Class and Id
Html Head