#17 HTML iFrame

February 11, 2021

Oh don’t worry this is not by Apple. It’s just a HTML tag to display web page within a web page.

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another web page or document within the current HTML document

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

Example

See the Pen iframe tag by Arpit (@soniarpit) on CodePen.

The Tag Attributes</h2> <p><strong>Note</strong> − The <em>frameborder</em>, <em>marginwidth</em>, <em>longdesc</em>, <em>scrolling</em>, <em>marginheight</em> attributes deprecated in HTML5. Do not use these attributes.</p> <table> <thead> <tr> <th>Sr.No</th> <th>Attribute & Description</th> </tr> </thead> <tbody> <tr> <td>1</td> <td><strong>src</strong></td> </tr> <tr> <td>This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src = “/html/top_frame.htm” will load an HTML file available in html directory.</td> <td></td> </tr> <tr> <td>2</td> <td><strong>name</strong></td> </tr> <tr> <td>This attribute allows you to give a name to a frame. It is used to indicate which frame a document should be loaded into. This is especially important when you want to create links in one frame that load pages into another frame, in which case the second frame needs a name to identify itself as the target of the link.</td> <td></td> </tr> <tr> <td>3</td> <td><strong>frameborder</strong></td> </tr> <tr> <td>This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no).</td> <td></td> </tr> <tr> <td>4</td> <td><strong>marginwidth</strong></td> </tr> <tr> <td>This attribute allows you to specify the width of the space between the left and right of the frame’s borders and the frame’s content. The value is given in pixels. For example marginwidth = “10”.</td> <td></td> </tr> <tr> <td>5</td> <td><strong>marginheight</strong></td> </tr> <tr> <td>This attribute allows you to specify the height of the space between the top and bottom of the frame’s borders and its contents. The value is given in pixels. For example marginheight = “10”.</td> <td></td> </tr> <tr> <td>6</td> <td><strong>height</strong></td> </tr> <tr> <td>This attribute specifies the height of <iframe>.</td> <td></td> </tr> <tr> <td>7</td> <td><strong>scrolling</strong></td> </tr> <tr> <td>This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either “yes”, “no” or “auto”. For example scrolling = “no” means it should not have scroll bars.</td> <td></td> </tr> <tr> <td>8</td> <td><strong>longdesc</strong></td> </tr> <tr> <td>This attribute allows you to provide a link to another page containing a long description of the contents of the frame. For example longdesc = “framedescription.htm”</td> <td></td> </tr> <tr> <td>9</td> <td><strong>width</strong></td> </tr> <tr> <td>This attribute specifies the width of <iframe>.</td> <td></td> </tr> </tbody> </table> <h2 id="iframe---remove-the-border-with-css">Iframe - Remove the Border with CSS</h2> <p>Using border property in CSS you can do this. We will learn about border property in CSS tutorial.</p> <pre class="astro-code dark-plus" style="background-color:#1E1E1E;color:#D4D4D4; overflow-x: auto;" tabindex="0" data-language="plaintext"><code><span class="line"><span><iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe></span></span></code></pre> <h2 id="iframe---target-for-a-link">Iframe - Target for a Link</h2> <p>An iframe can be used as the target frame for a link. The <code>target</code> attribute of the link must refer to the <code>name</code> attribute of the iframe:</p> <p class="codepen" data-editable="true" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="soniarpit" data-slug-hash="VwmpJMv" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="VwmpJMv"><span>See the Pen <a href="https://codepen.io/soniarpit/pen/VwmpJMv">VwmpJMv</a> by Arpit (<a href="https://codepen.io/soniarpit">@soniarpit</a>) on <a href="https://codepen.io">CodePen</a>.</span></p> <script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script> <p>Hope you enjoyed. happy coding :)</p> <p>Previous: <a href="https://www.codesnail.com/html-id-attribute/">#16 HTML id Attribute</a></p> <p>Next: <a href="https://www.codesnail.com/html-the-head-element/">#18 HTML – The Head Element</a></p> </div></article></main><footer><div class="border-t-2 border-dashed border-skin-line py-4 mt-16"><nav class="footer-nav w-full flex justify-between items-start"><ul class="flex gap-4 text-sm mb-5 text-skin-base/70"><li><a href="/about" class="hover:text-skin-accent">About</a></li><li><a href="/contact" class="hover:text-skin-accent">Contact</a></li><li><a href="/privacy" class="hover:text-skin-accent">Privacy</a></li><li><a href="/disclaimer" class="hover:text-skin-accent">Disclaimer</a></li></ul><button id="theme-btn" class="focus-outline" title="Toggles light & dark" aria-label="auto" aria-live="polite"><svg xmlns="http://www.w3.org/2000/svg" id="moon-svg"><path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" id="sun-svg"><path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path></svg></button></nav><div class="flex justify-between text-sm items-center text-skin-base/60"><span>© 2026 All rights reserved.</span></div></div></footer><script src="/scripts/toggle_theme.js"></script></body></html>