HTML from Scratch: How to Create Frames (iframe) in HTML. Lesson #16

Frames were once used to divide a page into several parts. But classic frames (<frameset> and <frame>) are no longer used in modern HTML. Instead, the <iframe> element allows you to embed one webpage inside another. This is useful when you need to display a video, map, widget, or load part of an external site into a window on your page.

This lesson explains how <iframe> works, where it is used, and how to apply it in real practice.

What is <iframe>?

<iframe> is a rectangular window inside a webpage.
Another HTML page loads inside this window — either your own or an external one.

Simple example:

<iframe src="page.html" width="600" height="300"></iframe>

The user will see the content of page.html as if it were placed directly on the page.

Where <iframe> is Used

Today, <iframe> is not used for building a website layout. It is typically used to embed specific elements:

1. Video and media content

For example, YouTube videos:

<iframe 
    src="https://www.youtube.com/watch?v=iz_k4ZenN6k" 
    width="560" 
    height="315"
    allowfullscreen>
</iframe>

2. Maps and geolocation

Services like Google Maps allow embedding maps:

<iframe
    width="600"
    height="450"
    src="https://maps.google.com/maps?q=Kyiv&t=&z=13&ie=UTF8&iwloc=&output=embed">
</iframe>

3. Widgets and mini-services

Examples: contact forms, chatbots, calculators, schedules.

<iframe 
    src="https://example.com/widget" 
    width="100%" 
    height="400">
</iframe>

4. Embedding your own pages

<iframe src="/docs/manual.html" width="100%" height="500"></iframe>

Main <iframe> Attributes

1. src — link to the page

<iframe src="page.html"></iframe>

2. width and height — size

<iframe src="page.html" width="800" height="400"></iframe>

3. title — accessibility description

<iframe src="page.html" title="Example embedded page"></iframe>

4. allowfullscreen — enables full screen

<iframe src="video.html" allowfullscreen></iframe>

5. loading=”lazy” — lazy loading

<iframe src="map.html" loading="lazy"></iframe>

Conclusion

<iframe> is a convenient way to embed one webpage inside another. It works well for videos, maps, widgets, forms, and small services. While old-style frames are no longer used, iframe remains a relevant and helpful element for modern websites.