16 min read
Frames and iframes
Why old HTML frames are obsolete, and how iframe embeds a map, a video or another page safely.
Old Frames: Obsolete
In the 1990s, websites were often split into frames with a <frameset> — for example a menu frame on the left and a content frame on the right, each showing a separate HTML file:
How frames used to lookHTML
<!-- OBSOLETE: do not use in new websites --><frameset cols="25%,75%"> <frame src="menu.html"> <frame src="content.html"></frameset><frameset> and <frame> are obsolete — they were removed from HTML5 and must not be used. Frames caused many problems:
- The address bar did not change, so pages could not be bookmarked or shared.
- Search engines found content pages without their menus.
- They were hard for screen readers, and did not work well on phones.
Today, a consistent header and navigation on every page (as you built) plus CSS layout does the same job better.
iframe: Embedding Another Page
The <iframe> (inline frame) is still part of HTML. It shows another web page inside a box in your page. It is mainly used to embed content from other services: a map, a video or a booking widget.
Embedding a page from the same siteHTML
<iframe src="about.html" title="The tea room's About page" width="560" height="220"></iframe>What the browser shows
| iframe attributes | |
|---|---|
Embedding a Map or Video
Map and video services give you ready-made embed code. For example, OpenStreetMap: find the place, choose Share → HTML, and copy the code. YouTube: Share → Embed. The code is an iframe like this (shortened here):
A map embed (from the service's Share button)HTML
<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=80.214%2C6.024%2C80.222%2C6.030&layer=mapnik" title="Map of Galle Fort" width="600" height="350" loading="lazy"></iframe>Practice
More lessons in HTML · Next: Validating and Testing Your HTML · Previous: A Gallery Page