HTML Iframes.

An iframe (Inline Frame) is used to display a web page within another web page. it is commonly used for maps, videos, and ads.

The Essentials

The <iframe> tag defines the inline frame.

The 'src' attribute specifies the URL of the page to embed.

The 'width' and 'height' attributes define the size.

The 'title' attribute is required for screen readers to describe the content.

The 'loading="lazy"' attribute improves performance by loading the iframe only when visible.

Iframes have their own browsing history and window object.

Professional Insights

The 'sandbox' Attribute

Security is critical! The 'sandbox' attribute restricts what the embedded page can do (e.g., blocking scripts or forms). Use it whenever you embed content you don't fully control.

Removing Borders

By default, iframes have a border. Use CSS 'border:none;' to make the embedded content blend seamlessly into your page layout.

Responsive Iframes

Iframes don't resize automatically. To make them responsive, developers often wrap them in a <div> with a fixed aspect ratio (like 16:9) using CSS.

Embedding YouTube and Google Maps

These services provide 'Embed' codes which are just <iframe> tags with pre-configured security and feature attributes (like allowfullscreen).

Critical Pitfalls

Missing the 'title' attribute, which is a major accessibility violation.

Embedding sites that have 'X-Frame-Options' set to 'DENY'—the iframe will appear blank.

Not using 'sandbox' for third-party widgets, which can be a security risk.

Forgetting to set a height, causing the iframe to be too small to read.

Interactive Lab

Sprint Tasks

Embed 'https://devpeak.io' in an iframe

Set the width to '100%' and height to '300px'

Add a descriptive title for accessibility

Loading editor...

Production Preview