Lesson 18 of 22
HTML iframe Tag
Learn how to use the HTML <iframe> tag to embed webpages, videos, and maps — covering src, height, width, name, srcdoc, allow, and security best practices.
HTML Course
In This Lesson
- What is an iframe?
- Syntax
- Attribute Reference
- src Attribute
- height & width
- name Attribute
- srcdoc Attribute
- Security
- Try It Yourself
- Summary
- FAQ
Progress0/22
What You'll Learn
What the iframe tag does
Embed a webpage with src
Set size with height & width
Use name as a link target
Embed HTML with srcdoc
Security best practices
What is an HTML iframe?
The HTML <iframe> tag stands for inline frame. It embeds another HTML document inside your current page — like a window within a window. Common uses include YouTube videos, Google Maps, social media widgets, and external web content.
iframe Syntax
HTML — Basic iframe Syntax
<!-- Basic --> <iframe src="URL"></iframe> <!-- With size --> <iframe src="https://tipsinlearning.blogspot.com" width="600" height="400" title="TipsInLearning" style="border: none; border-radius: 12px;"> </iframe>
iframe Attribute Reference
src
URL of page to embed
height
Height in px or %
width
Width in px or %
name
Target name for <a> links
srcdoc
Inline HTML to display
sandbox
Security restrictions
The src Attribute
src — Embed a Webpage by URL
Specifies the URL of the webpage to embed. This is the only required attribute — without it the iframe shows nothing.
HTML — src Attribute
<!-- Embed TipsInLearning --> <iframe src="https://tipsinlearning.blogspot.com" width="100%" height="400" title="TipsInLearning Website"> </iframe> <!-- Embed a YouTube video --> <iframe src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" title="YouTube video" allow="fullscreen" style="border: none;"> </iframe>
height and width
height / width — Set iframe Size
Use pixels or percentage. CSS style attribute also works — both approaches are valid.
HTML — iframe Size
<!-- Fixed pixel size --> <iframe src="https://tipsinlearning.blogspot.com" height="200" width="300"></iframe> <!-- Responsive: full width --> <iframe src="https://tipsinlearning.blogspot.com" style="width:100%;height:400px;border:none;border-radius:12px;"> </iframe>
The name Attribute
name — Use iframe as a Link Target
Give the iframe a name, then use that name as the target on a link — clicking the link loads the URL inside the iframe instead of a new tab.
HTML — iframe name as link target
<!-- The iframe with a name --> <iframe src="https://tipsinlearning.blogspot.com" name="myframe" height="400" width="100%"></iframe> <!-- These links load inside the iframe --> <a href="https://tipsinlearning.blogspot.com" target="myframe">Load HTML Course</a>
The srcdoc Attribute
srcdoc — Embed Inline HTML
Write HTML directly in the attribute — the iframe renders it without needing an external URL. When both src and srcdoc are present, srcdoc wins.
HTML — srcdoc
<iframe srcdoc="<html><body style='font-family:Arial;background:#f3eeff;padding:20px'> <h2 style='color:#7c3aed'>TipsInLearning</h2> <p>Free web development courses!</p> </body></html>" width="400" height="150"> </iframe>
Security Best Practices
Security Warning: Never embed untrusted third-party pages without sandbox. Malicious content could interact with your page or trick users.
HTML — iframe Security
<!-- sandbox: block everything --> <iframe src="https://example.com" sandbox></iframe> <!-- Allow only specific features --> <iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"> </iframe> <!-- Production best practice --> <iframe src="https://tipsinlearning.blogspot.com" title="TipsInLearning HTML Course" loading="lazy" style="border:none;"> </iframe>
Try It Yourself
Challenge — Embed Content
1Create an iframe with TipsInLearning URL, width="100%" and height="400"
2Add style="border:none;border-radius:12px;" to remove the default border
3Create an iframe with name="preview" and two links that load inside it using target="preview"
4Try srcdoc — write a small HTML page directly inside the attribute
5Add loading="lazy" and title="..." to every iframe for performance and accessibility
Quick Summary
1<iframe> embeds another webpage inside yours — a window within a window
2src = URL to embed; height & width set the size
3name — use as link target to load URLs inside the iframe
4srcdoc — write HTML directly in the attribute; no URL needed
5sandbox restricts permissions — use for untrusted content
6Always add title + loading="lazy" + border:none in production
Questions Beginners Ask
Common questions about HTML iframes:
Why won't some websites load in my iframe?
Many websites set an HTTP header called X-Frame-Options: DENY or SAMEORIGIN which tells browsers to refuse embedding. Google, Facebook, most banking sites, and others block iframe embedding for security reasons. You can only embed sites that allow it — like YouTube (using their /embed/ URL format) and Google Maps.
What's the difference between src and srcdoc?
src loads an external page from a URL. srcdoc lets you write HTML directly inside the attribute value and the iframe renders it — no external URL needed. When both are present, srcdoc takes priority. Use srcdoc for small code previews or self-contained demos.
What does the sandbox attribute do?
sandbox applies a set of security restrictions to the iframe — by default it blocks scripts, form submissions, pop-ups, and other potentially dangerous actions. You can selectively re-enable features: sandbox='allow-scripts' allows scripts, allow-forms allows form submission. Always use sandbox when embedding untrusted content.
How do I embed a YouTube video with an iframe?
Use the special /embed/ URL format YouTube provides. Go to a YouTube video, click Share → Embed, and copy the provided iframe code. The key difference: use https://www.youtube.com/embed/VIDEO_ID — not the regular watch URL. Also add allow='fullscreen' and style='border:none'.
Why should I add a title attribute to iframes?
The title attribute is important for accessibility. Screen readers announce the title to blind users so they know what the embedded content is before they interact with it. Without a title, screen readers may announce something like 'iframe' which gives no useful information. Always describe the content — for example, title="Google Maps showing our office location".