There are many cases where you might want to share external media while keeping visitors on your webpage rather than linking to a third-party website. iframes let you seamlessly incorporate external media on your website while keeping the code separate. iframes embed videos, documents, social media feeds, maps, interactive games, and advertisements. These elements have defined borders and may have their own scrollbars. While GIFs and images are static, a fully embedded iframe allows for scripting, so you can make your element interactive or track ad impressions. 

The HTML <iframe> tag specifies an inline frame. To give you a specific iframe example, a snippet of code might allow you to embed a Google map.^{Footnote 3} So, why might it be handy to isolate an element from your JavaScript and CSS? Well, in another application, a developer might want users to have the ability to create and save emails based on preview templates. In order to preview the template documents, all with their own unique styles, the developer choses iframe code as the cleanest solution.     

Embed serves the same purpose as iframe code, only with fewer attributes. For instance, the embed HTML 5 tag defines height, source, type, and width attributes, and can be used for Flash animations and browser plugins. iframe HTML tags, on the other hand, can define all this, as well as more advanced attributes like alignment, frame border, long description, margin height and width, name, sandbox navigation, and scrollbars. 

An iframe is a type of HTML code, supported by all major web browsers and included in the latest HTML 5 specifications. HTML is not a programming language; it’s a markup language used to specify a document’s structure, organization, and layout. By contrast, programming languages like C#, JavaScript, or Python write functions, contain conditional logic, and store or manipulate data. You can write iframe HTML tags into your programming language code of choice. 

iframe is an HTML tag, which can include CSS properties. Developers can use several different methods to add CSS to an iframe. They can: use internal CSS inside the iframe tag; use the internal CSS for the iframe tag inside the HTML file; use external CSS for the iframe tag by creating a different file for the CSS code and including it in the HTML file using link and href tags before the iframe tag; or use JavaScript code to add the CSS file link at the head of the HTML document.^{Footnote 4}

While an HTML frame and an iframe will both embed a resource directly into another webpage, there are differences worth noting. Due to responsivity and accessibility issues, HTML frames are no longer supported in HTML 5. The iframe element, on the other hand, is supported in HTML 5, so it’s worth learning as a workaround solution.^{Footnote 5}