« Previous Next »

HTML Iframe Syntax

The HTML <iframe> tag defines an inline frame, which is used to embed another HTML document within the current page.

Iframe - Set Height and Width

The height and width are specified in pixels by default:

Output:

To remove the border, add the style attribute and use the CSS border property:

Output:

With CSS, you can also change the size, style and color of the iframe's border:

Output 3:

The target attribute of the link must refer to the name attribute of the iframe:

Output 4:

Practice Exercises

Task 1: How to set specific width, height, and border styling for an <iframe>?

Goal: Embed an external page using custom dimensions (width: 100%, height: 250px) and wrap it inside a custom colored border table.
💡 Hint: Use the width, height, and frameborder="0" attributes on the <iframe> tag.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Custom Iframe Dimensions</title>
  </head>
  <body>

    <h3>Embedded Content Preview</h3>

    <table border="2" bordercolor="#007bff" width="100%">
      <tr>
        <td>
          <iframe 
            src="demo_iframe.html" 
            width="100%" 
            height="250" 
            frameborder="0" 
            title="Custom Frame">
          </iframe>
        </td>
      </tr>
    </table>

  </body>
</html>
Output :

Embedded Content Preview

This page is displayed in an iframe
Explanation: The frameborder="0" attribute removes the default grey border of the iframe, while wrapping it inside a <table> provides a custom colored border around the frame content.
Task 2: How to open a hyperlink inside a specific <iframe> when clicked?

Goal: Create a link that loads a target URL directly into an inline iframe on the same page.
💡 Hint: Match the name attribute of the <iframe> with the target attribute of the <a> tag.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Iframe Target Example</title>
  </head>
  <body>

    <h3>Interactive Content Viewer</h3>

    <iframe 
      src="demo_iframe.html" 
      name="content_frame" 
      height="200px" 
      width="100%" 
      title="Target Frame">
    </iframe>

    <p>
      Click here: 
      <a href="https://aitaurangabad.com/" target="content_frame">Open aitaurangabad Website</a>
    </p>

  </body>
</html>
Output :

Interactive Content Viewer

This page is displayed in an iframe

Click here: Open aitaurangabad

Explanation: When the target attribute of an anchor tag matches the name attribute of an iframe, clicking the link loads the new webpage inside that iframe instead of opening a new tab.
« Previous Next »