HTML iFrames

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="html iframes, fames, iframe tutorial, free, tables, forms, fonts, color, image maps, hyperlinks"> <meta name="Description" content="Learn about HTML iframes with this HTML tutorial."> <link rel="canonical" href="https://www.quackit.com/html/tutorial/html_iframes.cfm"> <title>HTML iFrames</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">HTML iFrames</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/html/tutorial/html_image_maps.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Image Maps</a></li> <li><a href="/html/tutorial/html_entities.cfm">HTML Entities <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">In HTML, iframes defines an inline frame. An inline frame enables you present another HTML document within the same window.</p> <p>The W3C refers to an iframe as a <q cite="https://www.w3.org/TR/html5/browsers.html#nested-browsing-context">nested browsing context</q>. In other words, you can browse an HTML document that is nested inside another. Typically the iframe takes up a small portion of the document, but you could make it any size you like. </p> <p>Inline frames are often used in advertising. Many advertisers and advertising networks use iframes to display their ad within a publisher's website. Benefits of using iframes for advertising include more control for the advertiser over how the ad is displayed, as well as enhanced performance monitoring.</p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>Creating an iframe</h2> <p>To create an iframe, use the <a href="/html/tags/html_iframe_tag.cfm"><code><iframe></code></a> tag. The <code>src</code> attribute provides the URL of the external document to use within the iframe. The <code>seamless</code> attribute determines that it should blend seamlessly into the containing document, so that it actually appears to be part of the containing document.</p> <p>Also, you can set the width and height using the <code>width</code> and <code>height</code> attributes.</p> <p>Here's an example:</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><iframe sandbox src="/html/tags/html_iframe_tag_example.cfm" width="150" height="150" seamless></iframe></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/tutorial/html_iframe_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>As you can see, it's only one line of code, but it could display a complex web page with hundreds (or even thousands) of lines of code if it needed to.</p> <p>There are a few other attributes that you can use with inline frames. See the <a href="/html/tags/html_iframe_tag.cfm"><code><iframe></code></a> element for more details.</p> <h2>HTML Frames</h2> <p>Before we leave the subject of iframes, let's talk about <a href="/html/tutorial/html_frames.cfm">frames</a> (as opposed to <em>iframes</em>).</p> <p>HTML frames allow you to split the whole window up into different frames. For example, you can have a frame to display your left menu, another frame to display the top menu, and another frame to display the main content area. With frames, your HTML document can be made up of many different pages.</p> <p>HTML frames were once popular on the web, however, their usage has dwindled over the years. This is mainly due to the various <a href="/html/disadvantages_of_html_frames.cfm">usability issues</a> that they can cause, issues with search engine optimization, as well as the fact that frames are being discontinued (as of <a href="/html_5/">HTML5</a>).</p> <p>Having said that, there are many valid arguments for using frames within some contexts. If you're interested, check out these <a href="/html/templates/frames/">HTML5 compliant frames templates</a> that use <a href="/css/">CSS</a> to provide frames-based functionality, while escaping most of the usability issues inherent in the traditional frames based websites.</p> <ul class="pager"> <li><a href="/html/tutorial/html_image_maps.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Image Maps</a></li> <li><a href="/html/tutorial/html_entities.cfm">HTML Entities <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/html/tags/html_iframe_tag.cfm" title="">HTML <code>iframe</code> Tag</a></li> <li><a href="/html/templates/frames/" title="">Frames Templates</a></li> <li><a href="/html/disadvantages_of_html_frames.cfm" title="">Disadvantages of Frames</a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/html/tutorial/">HTML Tutorial</a></h3> <ul> <li><a href="/html/tutorial/introduction.cfm">Introduction to HTML</a></li> <li><a href="/html/tutorial/getting_started.cfm">Getting Started</a></li> <li><a href="/html/tutorial/html_elements.cfm">HTML Elements</a></li> <li><a href="/html/tutorial/html_formatting.cfm">HTML Formatting & Semantics</a></li> <li><a href="/html/tutorial/html_attributes.cfm">HTML Attributes</a></li> <li><a href="/html/tutorial/html_styles.cfm">HTML Styles</a></li> <li><a href="/html/tutorial/html_colors.cfm">HTML Colors</a></li> <li><a href="/html/tutorial/html_links.cfm">HTML Links</a></li> <li><a href="/html/tutorial/html_images.cfm">HTML Images</a></li> <li><a href="/html/tutorial/html_meta_tags.cfm">HTML Meta Tags</a></li> <li><a href="/html/tutorial/html_comments.cfm">HTML Comments</a></li> <li><a href="/html/tutorial/html_forms.cfm">HTML Forms</a></li> <li><a href="/html/tutorial/html_tables.cfm">HTML Tables</a></li> <li><a href="/html/tutorial/html_image_maps.cfm">HTML Image Maps</a></li> <li><a href="/html/tutorial/html_iframes.cfm">HTML iFrames</a></li> <li><a href="/html/tutorial/html_entities.cfm">HTML Entities</a></li> <li><a href="/html/tutorial/html_layouts.cfm">HTML Layouts</a></li> <li><a href="/html/tutorial/html_scripts.cfm">HTML Scripts</a></li> <li><a href="/html/tutorial/html_website_templates.cfm">HTML Website Templates</a></li> <li><a href="/html/tutorial/website_hosting.cfm">Website Hosting</a></li> <li><a href="/html/tutorial/summary.cfm">Summary</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

HTML iFrames