MP Web Studio
HTMLFoundation track
109 / 120

LESSON 109 OF 120

Build: a described and restricted iframe

Declare an iframe with a title, lazy loading and an explicit sandbox.

Official sourceWHATWG HTML — iframeReviewed: 2026-08-26
STEP 1 · LEARN

How it works

Declare an iframe with a title, lazy loading and an explicit sandbox. Semantic structure should describe meaning, not visual appearance.

Correct example
<iframe src="/demo/project/" title="Interactive project demonstration" loading="lazy" sandbox></iframe>

The src identifies the embedded document, title describes it for people who cannot identify it visually and loading="lazy" can defer loading. An empty sandbox applies maximum restrictions; permissions are added only when needed and reviewed.

Common mistake
<iframe src="/demo/" title="Demo" loading="lazy" sandbox="allow-scripts allow-same-origin"></iframe>

The basic attributes exist, but combining allow-scripts and allow-same-origin can seriously weaken isolation for same-origin content.

STEP 2 · APPLY

Your exercise

Complete the example. Declare an iframe with a title, lazy loading and an explicit sandbox.

STEP 3 · BUILD

Write and see the result

index.htmlHTML
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The iframe declares a non-empty source.
  • The iframe has a descriptive title.
  • The iframe uses lazy loading and an explicit sandbox.
  • The sandbox does not combine allow-scripts with allow-same-origin.
Explain the solution logic

Add src, title and loading="lazy". For this lesson use an empty sandbox attribute; do not add allow-scripts and allow-same-origin together.