Scribd
Upload
80 views

HTML Iframes

An iframe allows a webpage to embed another webpage within it. It is specified using the <iframe> HTML tag, which requires a "src" attribute containing the URL of the webpage to embed. Iframes are commonly used to embed videos, maps, and advertisements on websites. However, iframes can impact page performance and SEO if overused or not optimized properly. They also present security risks if the embedded content is not trustworthy. In summary, iframes provide a way to include external content while maintaining separation between pages for security and performance purposes.

Uploaded by

uni.web.hackathon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
80 views

HTML Iframes

An iframe allows a webpage to embed another webpage within it. It is specified using the <iframe> HTML tag, which requires a "src" attribute containing the URL of the webpage to embed. Iframes are commonly used to embed videos, maps, and advertisements on websites. However, iframes can impact page performance and SEO if overused or not optimized properly. They also present security risks if the embedded content is not trustworthy. In summary, iframes provide a way to include external content while maintaining separation between pages for security and performance purposes.

Uploaded by

uni.web.hackathon
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML iframes

Prof. Madonna Lamin


ITMBU, SoCSET
Introduction

Embedded content is common on websites. Part of what makes the web so powerful
is our ability to pull content from multiple servers to build a coherent website
experience

For example, embedded videos can add a lot of value to your pages. They help
engage, inform and delight your visitors, as long as they appear seamless with your
other content

If you want to embed YouTube videos - or any type of embeddable content- in your
own website’s HTML, one option is to utilize the iframe element.
What is an Iframe? How to embed content
with Iframe?

"An iframe, short for inline frame, is an HTML element that contains another
HTML document within it.

The iframe element is specified with the iframe tag. It may be placed anywhere in
an HTML document, and thus anywhere on a web page. Iframes are most often
used to embed specific content from one web page — like a video, form, document,
or even a full web page — within a different web page."
https://blog.hubspot.com/website/what-is-an-iframe
"This is a powerful capability in HTML — you can take any content from any
website (with permission) and place it on your own site to enhance your content."
https://blog.hubspot.com/website/what-is-an-iframe
How to make an Iframe?

"To use an iframe, we use the <iframe> HTML tag.

This tag requires a src (source) attribute, which specifies the URL of the HTML file to be embedded on
the parent page

In its most basic from, an iframe looks like this in HTML.

<iframe src="URL"></iframe>

<iframe src="https://www.example.com/" width="1500px" height="500px"></iframe>

This code will embed a web page onto its parent page
How are iframes used?
● Websites often use iframes to embed media from external websites. For example, here’s the
embed code for a HubSpot YouTube video embedded at the top of this post

<iframe width="560" height="315" src="https://www.youtube.com/embed/S93nYy-Bxzo"


frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen>

</iframe>
● Embedded maps are another common use of iframes. Google Maps allows you to copy embed
code from any map location and display it on your website
● Also, display advertisements are often created with iframes. While images and gifs are static
elements, a fully embedded HTML document allows for scripting. With this method, ads can be
made interactive, as well as track impressions and clicks.

https://blog.hubspot.com/website/what-is-an-iframe
Using Iframes: Some Words of Caution
● First, make absolutely sure that the site or content you embed is trustworthy and secure. If attackers
successfully inject harmful code into a web page that you embed, it could harm your website too.
● Second, iframes can affect page performance if the embedded content takes too long to retrieve from its
host. Avoid placing too many iframes on a single page (unless you’re writing an informative blog post
about them), and consider taking advantage of the loading attribute

<iframe src="URL" loading="lazy"></iframe>

“lazy” sets the iframe to load only after it enters the visitor’s view, which works to decrease the time of
initial page load.

● Finally, consider the effect of iframes on your pages’ SEO. Google recommends avoiding iframes and
other rich media content on your website, as this content is harder to index than plain HTML content. If
you still want to use an iframe, provide text-based links to any content linked in your iframe if you can
so search engine crawlers can recognize them.
Iframe is one of the oldest HTML elements, and its resilience and usefulness tell us it’s
here to stay for a while. For embedding content, this element is a must for your HTML
tool belt.
THANK YOU

You might also like