👀 Live Preview
An iframe with inline content via srcdoc:
No external HTML file was loaded for the frame document.
HTML srcdoc Attribute
Overview
Introduction
The srcdoc attribute is a useful HTML feature used with the <iframe> element. It lets you embed HTML content directly in the attribute value as a string, so the browser renders that markup inside the frame without fetching a separate file from src.
This is handy for lightweight demos, previews, documentation embeds, and sandboxed snippets. For large or reusable pages, a normal src URL is often simpler to maintain.
What You’ll Learn
iframe only
One element.
Inline HTML
String value.
vs src
URL vs inline.
Escaping
< in attrs.
JavaScript
.srcdoc updates.
sandbox
Stay secure.
Fundamentals
Purpose of srcdoc
The primary purpose of the srcdoc attribute is to specify the HTML content that should be displayed inside an <iframe>. Instead of pointing src at an external document, you inline the markup in the parent page itself. The browser creates a nested document from that string and renders it in the frame.
This provides a convenient way to build self-contained iframe previews—especially in tutorials, code playgrounds, and UI components that show a live result next to source code.
srcdoc overrides src
When srcdoc is present and supported, the browser uses it and does not load the URL from src. Use one approach or the other for clarity; do not rely on both at once.
Foundation
📝 Syntax
Set srcdoc to an HTML string on <iframe>. Escape angle brackets in the parent HTML document:
srcdoc.html
<iframe
title="Embedded preview"
srcdoc="<p>This is embedded content.</p>"
width="300"
height="200"></iframe>Syntax Rules
- Valid only on
<iframe>. - Value is a string of HTML (fragment or full document).
- In static HTML, escape
<as<inside the attribute. - Always set a descriptive
titlefor accessibility. - When both
srcandsrcdocare set,srcdoctakes precedence. - Use
sandboxwhen embedding untrusted or dynamic HTML.
Reference
💎 Values
The srcdoc attribute accepts a string containing HTML markup:
- Simple fragment —
<p>Hello</p>(escaped in attributes). - Full mini-document —
<!DOCTYPE html><html>...</html>with inline styles. - Any valid HTML — Text, images, links, and other elements allowed by sandbox rules.
- Dynamic string — Built in JavaScript and assigned to
iframe.srcdoc.
srcdoc-values.html
<!-- Short paragraph -->
srcdoc="<p>Inline content</p>"
<!-- Full document with styles -->
srcdoc="<!DOCTYPE html><html><body><h1>Title</h1></body></html>"Cheat Sheet
⚡ Quick Reference
| Topic | Detail | Example |
|---|---|---|
| Element | <iframe> only | Inline embed |
| Value type | HTML string | Escaped markup |
vs src | Inline vs external URL | srcdoc wins if both set |
| JavaScript | iframe.srcdoc = html | Runtime update |
| Security | Use sandbox | Limit scripts |
| A11y | Required title | Describe frame |
Scope
Applicable Elements
| Element | Supported? | Notes |
|---|---|---|
<iframe> | Yes | Primary and only standard use |
<img>, <script> | No | Use src instead |
<object>, <embed> | No | Different embedding models |
| Related | sandbox, title | Pair with iframe attributes |
Compare
srcdoc vs src on iframe
| Feature | srcdoc | src |
|---|---|---|
| Content source | Inline HTML string | External URL |
| Extra HTTP request | No (for frame document) | Yes |
| Best for | Small demos, previews | Full pages, apps, widgets |
| Maintenance | Markup in parent file | Separate HTML file |
| If both set | Used (src ignored) | Ignored when srcdoc present |
Hands-On
Examples Gallery
Basic inline embed, dynamic JavaScript update, and a styled document with sandbox.
Example — Embedding Content with srcdoc
Embed a simple paragraph inside an iframe:
srcdoc.html
<iframe
title="Embedded preview"
srcdoc="<p>This is the embedded content within the iframe.</p>"
width="300"
height="200"></iframe>How It Works
The browser parses the HTML string in srcdoc and renders it as the iframe’s document. This is useful for lightweight content without creating a separate HTML file.
Dynamic Values with JavaScript
Update iframe content at runtime by assigning to srcdoc:
dynamic-srcdoc.html
<iframe id="dynamicIframe" title="Dynamic frame"></iframe>
<script>
var html = "<p>This content is dynamically set with JavaScript.</p>";
document.getElementById("dynamicIframe").srcdoc = html;
</script>How It Works
The iframe with id dynamicIframe starts empty. The script assigns an HTML string to srcdoc, which the browser renders inside the frame on the fly.
Example — Styled Document with sandbox
Embed a mini HTML document and restrict capabilities with sandbox:
srcdoc-sandbox.html
<iframe
title="Sandboxed preview"
sandbox=""
srcdoc="<!DOCTYPE html><html><body><h1>Hello</h1></body></html>"
width="320"
height="140"></iframe>How It Works
sandbox="" applies the strictest default restrictions (no scripts, forms, or top navigation). Add tokens like sandbox="allow-scripts" only when you truly need them.
A11y
♿ Accessibility
- Always set title — Every
<iframe srcdoc>needs atitledescribing the embedded content for screen reader users. - Meaningful content inside — Use proper headings and text in the srcdoc HTML, not only visual styling.
- Keyboard focus — If the iframe contains interactive elements, ensure they are reachable and labeled.
- Do not trap users — Avoid confusing nested scroll areas without clear context.
- lang attribute — Include
langin full srcdoc documents when language differs from the parent page.
🧠 How srcdoc Works
1
Author sets HTML string
On iframe srcdoc.
Markup
2
Browser parses string
Creates nested document.
Parse
3
Content renders in frame
Isolated browsing context.
Display
=
Inline embed ready
No extra HTML file.
Compatibility
Browser Support
The srcdoc attribute is supported in all modern browsers on <iframe>.
HTML5 · Fully supported
Inline iframe documents
Chrome, Firefox, Safari, and Edge all support srcdoc.
98% Browser support
Google Chrome Fully supported
Full supportMozilla Firefox Fully supported
Full supportApple Safari Fully supported
Full supportMicrosoft Edge Fully supported
Full supportsrcdoc attribute 98% supported
Bottom line: Use srcdoc in modern projects; provide a src fallback only if you must support very old browsers.
Pro Tips
💡 Best Practices
✅ Do
- Use
srcdocfor small, self-contained iframe previews - Escape markup properly in static HTML attributes
- Set a descriptive
titleon every iframe - Combine with
sandboxfor untrusted or user content - Test iframe behavior across major browsers
❌ Don’t
- Insert unsanitized user HTML into
srcdoc - Embed huge documents inline—use
srcinstead - Set both
srcandsrcdocwithout understanding precedence - Forget accessibility for nested frame content
- Enable
allow-scriptsin sandbox without a security review
Wrap Up
Conclusion
The srcdoc attribute provides a convenient way to embed HTML content within iframes directly in your page. Whether you include static snippets or update content dynamically with JavaScript, understanding srcdoc helps you build interactive previews and tutorials.
Use it for lightweight embeds, pair it with sandbox for safety, and reach for src when the framed content deserves its own file. With both tools, you can create engaging, well-structured embedded experiences.
Summary
Key Takeaways
Knowledge Unlocked
Five truths every developer should know about srcdoc
Bookmark these before your next iframe embed.
5
Core concepts 01
Inline HTML
String on iframe
Purpose 02
iframe only
One element
Scope 03
Beats src
When both set
Compare 04
.srcdoc JS
Live updates
Dynamic 05
Use sandbox
Stay safe
Security❓ Frequently Asked Questions
It specifies inline HTML to render inside an
iframe instead of loading an external document from src.Only the
<iframe> element supports the srcdoc attribute.When supported,
srcdoc is used and src is ignored for loading the frame document.In static HTML, write
< instead of < inside the attribute. In JavaScript, build a normal HTML string and assign it to iframe.srcdoc.Yes. Set
iframe.srcdoc = "<p>New content</p>" to update the frame without reloading the parent page.Yes in all modern browsers. Very old browsers may fall back to
src only.Embed inline iframe content
Practice srcdoc and dynamic updates in the Try It editor.
About the author
5 people found this page helpful