HTML Iframe Attributes

Iframes

Iframe attributes control embedded content and permissions.

An iframe embeds another page inside the current page. That is powerful, but it also creates security, privacy, performance and accessibility concerns.

The most important iframe attributes are not only src. A production iframe needs a useful title and often sandbox, allow, loading and referrerpolicy.

Attribute group: src, title, sandbox, allow, loading, referrerpolicy. Attributes for embedded pages, permissions and isolation.

What belongs here

Learn attributes by purpose, not by memorizing random names.

`src`

The embedded page URL.

`title`

Accessible description of what the iframe contains.

`sandbox`

Restricts what the embedded content can do.

`allow`

Grants specific permissions such as fullscreen or clipboard access.

`loading`

Can lazy load offscreen iframes.

`referrerpolicy`

Controls how much referrer information is sent.

Syntax in context

A safe iframe is explicit.

Always describe the iframe with title. Add sandbox when you do not fully control the content.

<iframe
  src="demo.html"
  title="Interactive HTML demo"
  sandbox="allow-scripts"
  loading="lazy"
></iframe>

Good versus weak

Small attribute choices can change behavior, accessibility and security.

Good

<iframe
  src="demo.html"
  title="Interactive HTML demo"
  sandbox="allow-scripts"
  loading="lazy"
></iframe>

Weak

<iframe src="https://unknown.example/widget"></iframe>

Rules that matter

Use these rules before publishing real HTML.

Always add title

The title tells assistive technology what the embedded page is.

Sandbox untrusted content

Start restrictive and only add permissions you need.

Lazy load lower embeds

Offscreen embeds can be heavy and slow.

Review permissions

allow should not become a random collection of capabilities.

Production thinking

Attributes are tiny pieces of HTML with real product impact.

Why does this matter?

Attributes are small, but they change how an element works. A good attribute can make a link usable, an image understandable, a form easier to complete or a script safer to load.

Accessibility

An iframe without title is hard to understand when navigating with assistive technology.

Production note

Third-party iframes can slow pages and create privacy questions. Treat them as dependencies.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change one tag, attribute or text value in the example.
Run the preview and describe exactly what changed.
Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

Change one meaningful part of the HTML, not only the visible text.
Run the preview and check whether the result still makes semantic sense.
Explain why the element or attribute you changed belongs in this exact place.

HTML CSS

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  font-family: system-ui, sans-serif;
  background: #07111f;
  color: #ffffff;
}

.demo-card {
  width: min(760px, calc(100vw - 48px));
  border-radius: 24px;
  padding: 28px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(140, 255, 193, 0.26);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.content-panel {
  margin-top: 18px;
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.muted-card { color: #b8c4d6; }
.label, caption {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, strong { color: #8cffc1; }
p, li, dd, figcaption { color: #d6deec; line-height: 1.65; }
a { color: #62d5ff; font-weight: 800; }
img, iframe, video, svg { max-width: 100%; border-radius: 18px; }
iframe { width: 100%; min-height: 180px; border: 1px solid rgba(255,255,255,0.16); }

label { display: block; margin-top: 14px; color: #d6deec; font-weight: 800; }
input, button {
  display: block;
  width: 100%;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 12px 14px;
  font: inherit;
}

button {
  margin-top: 16px;
  border: 0;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
  cursor: pointer;
}

button:disabled { opacity: 0.56; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px 14px; }

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?