BeingXpert Learn & Build Future

18. HTML Iframes

What you will learn

  • What an iframe is and when to use one
  • How to set its size and title
  • Why some sites cannot be embedded
  • How to keep embedded content safe with sandbox

What is an iframe?

An iframe (inline frame) shows another web page inside your page, like a window. People use iframes to embed videos, maps, and widgets from other services.

Syntax

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

A first example

Example

<iframe src="https://example.com/" width="400" height="200" title="Example website"></iframe>

The code, step by step

  1. src is the address of the page to show.
  2. width and height set the size of the window in pixels.
  3. title describes the content. Screen readers announce it, so every iframe needs one.
  4. An iframe has a closing tag even when it has no content between the tags.

A working demo

This demo shows a tiny page that is written inside the iframe itself, using the srcdoc attribute.

Example

<iframe srcdoc="&lt;p&gt;Hello from inside an iframe!&lt;/p&gt;"
        width="300" height="80"
        title="A small demo page"
        sandbox></iframe>

Output

Removing the border

Browsers draw a border around iframes. Remove it with CSS:

Example

<iframe src="page.html" title="Demo" style="border: 0;"></iframe>

Safety: the sandbox attribute

You should treat embedded content as untrusted. The sandbox attribute locks an iframe down. Without any values, it blocks scripts, forms, popups, and more. You can then allow only what you need.

Example

<iframe src="widget.html" title="Widget" sandbox="allow-scripts"></iframe>

Only embed content from sources you trust. Many services give you a ready-made embed code. Copy it exactly and keep any sandbox, allow, or title attributes it contains.

Why a page may not appear

Many websites forbid being shown inside an iframe, which protects their visitors from tricks such as clickjacking. If you embed such a site, you will see a blank frame or an error message. This is the site’s decision, not a mistake in your code.

Iframes and links

A link can open its page inside an iframe if the iframe has a name and the link’s target uses the same name.

Example

<iframe name="viewer" title="Viewer" width="300" height="100"></iframe>
<p><a href="page.html" target="viewer">Open in the viewer</a></p>

Common mistakes

  • Leaving out title, which makes the iframe unclear for screen reader users.
  • Embedding content you do not trust, and without sandbox.
  • Expecting every website to be embeddable.
  • Using iframes to build whole page layouts. Use normal HTML and CSS instead.
  • Embedding without setting a size, so the frame is small and awkward.

Exercise

Write an iframe 500 pixels wide and 300 high, showing https://example.com/, titled Example, with no border.

Show solution 
<iframe src="https://example.com/" width="500" height="300" title="Example" style="border: 0;"></iframe>

Knowledge check

1. Which attribute holds the address shown in an iframe?

src

2. Why does an iframe need a title?

Screen readers use it to describe the frame.

3. Which attribute restricts what embedded content may do?

sandbox

Summary

  • An <iframe> shows another page inside yours.
  • Always give it a title and a size.
  • Use sandbox and trust only reliable sources.
  • Some sites refuse to be embedded.
Scroll to Top