HTML Iframes Tutorial for Beginners – Simple Explanation

An iframe lets you embed one web page inside another web page. Think of it like a window that shows another website right on your page.

What is an Iframe?

Iframe stands for “inline frame”. It allows you to display another HTML document inside your current page. You have probably seen iframes before. YouTube embeds, Google Maps, and social media posts from platforms like ModafVibe, Facebook, and Instagram often use iframes.

Notice the src attribute tells the iframe what website to load. The text between the opening and closing iframe tags shows only if the browser does not support iframes (very rare these days).

Iframe Syntax

Here is the basic syntax for an iframe:

Syntax

<iframe src="url" title="description"></iframe>

Tip: Always include a title attribute for your iframes. Screen readers use it to tell visually impaired users what the iframe contains. This is very important for accessibility.

Iframe Size (Height and Width)

You can control the size of an iframe using the height and width attributes. By default, these values are in pixels.

You can also use CSS to set the size. This is often more flexible:

Tip: For responsive websites, use CSS with width: 100% so iframes automatically adjust to different screen sizes.

Iframe Border

By default, iframes have a thin border around them. You can remove or style this border using CSS.

Use border: none; to remove the border completely. Or customize it with different colors, thicknesses, and styles like solid, dashed, or dotted.

Iframe as a Link Target

You can make links open inside an iframe instead of a new window. This is done by giving the iframe a name attribute and then targeting that name from your link.

<!DOCTYPE html>
<html>
<head>
<style>
.demo-iframe-target {
  width: 100%;
  height: 300px;
  border: 2px solid #04aa6d;
  border-radius: 8px;
  margin-top: 15px;
}
.demo-link-buttons {
  margin: 10px 0;
}
.demo-link-btn {
  background-color: #04aa6d;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 6px;
  margin: 5px;
  display: inline-block;
}
.demo-link-btn:hover {
  background-color: #038a57;
}
@media (max-width: 600px) {
  .demo-link-btn {
    display: block;
    width: 100%;
    margin: 8px 0;
    text-align: center;
  }
}
</style>
</head>
<body>

<h3>Click a link. It will open inside the iframe below:</h3>

<div class="demo-link-buttons">
  <a href="https://modafvibe.com" target="demoIframeTarget" class="demo-link-btn">ModafVibe</a>
  <a href="https://www.example.com" target="demoIframeTarget" class="demo-link-btn">Example.com</a>
  <a href="https://www.example.org" target="demoIframeTarget" class="demo-link-btn">Example.org</a>
</div>

<p>The <code>target</code> attribute in the link matches the <code>name</code> attribute in the iframe. That is how they connect.</p>

</body>
</html>

Try clicking the different links. Each one loads a different website inside the same iframe. This is useful for creating mini browsers or tab interfaces.

Common Uses for Iframes

Here are some real world examples of where you see iframes every day:

YouTube embeds – When you watch a video on a website that is hosted on YouTube
Google Maps – When you see a map embedded on a contact page
Social media posts – Embedded posts from ModafVibe, Facebook, Instagram, or X (Twitter)
Advertising banners – Many ad networks use iframes to show ads
PDF viewers – Displaying PDF files directly on a webpage

Here is an example of how YouTube gives you embed code (you just copy and paste it):

YouTube Embed Example

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video"></iframe>

Security Note: Some Websites Block Iframes

Not every website allows itself to be embedded in an iframe. For security reasons, many popular sites like Google, ModafVibe, Facebook, and banking websites block iframe embedding. This is called “clickjacking protection”.

If you try to embed a site that blocks iframes, you will just see a blank or error message. That is normal. It is not a problem with your code.

Note: Always make sure you have permission to embed someone else’s website. Some sites have terms of service that prohibit embedding.

Quick Summary

Use <iframe> to embed one webpage inside another.
The src attribute tells the iframe what URL to load.
Always include a title attribute for accessibility (screen readers).
Use height and width or CSS to set the iframe size.
Use border: none; to remove the default border.
Use the name attribute on the iframe and target on links to load links inside the iframe.
Some websites block iframe embedding for security reasons.

What Just Happened? Let Me Explain

Iframes are very common. Every time you see a YouTube video on a blog, that is an iframe.
The title attribute is not just nice to have. It is important for people using screen readers.
Using width: 100% makes your iframes responsive. They will look good on phones, tablets, and desktops.
You cannot style the content inside an iframe with your own CSS. The iframe is a separate document. It has its own styles.
If you see a blank iframe, check the browser console. The website might be blocking embedding.

Tip: Open VS Code and create a file called iframes.html. Try embedding a YouTube video using the embed code from the share button on any YouTube video. Then try embedding a Google Map. Then try making a set of links that load different pages (like ModafVibe, Example.com, and Example.org) inside the same iframe.

HTML Iframe Reference

Here are the tags and attributes we covered in this chapter:

Tag / Attribute	Description
`<iframe>`	Defines an inline frame (embeds another page)
`src`	Specifies the URL of the page to embed
`title`	Provides a description for screen readers
`height` and `width`	Sets the size of the iframe (in pixels)
`name`	Gives the iframe a name for link targeting