Lesson 11 of 55 · HTML
Embedding External Content – iframe, embed, object
Duration: 8 min
Embedding Other Pages
<iframe src='https://example.com' title='Example site' width='600' height='400' loading='lazy' sandbox='allow-scripts allow-same-origin'></iframe>
<embed src='document.pdf' type='application/pdf' width='100%' height='500' />
<object data='diagram.svg' type='image/svg+xml' width='300' height='200'></object>
When to use each element
<iframe>– Embed another HTML page; ideal for third‑party widgets, maps, or videos. Use thesandboxattribute to restrict capabilities (e.g.,allow-scripts).<embed>– Generic external resource (PDF, legacy Flash). Prefer<object>for better fallback handling and for SVG.<object>– Can embed SVG, PDFs, or other resources and provide fallback content inside the tag.
Security considerations
- Always provide a descriptive
titleoraria-labelon<iframe>for screen readers. - Use
sandboxto isolate the embedded page and prevent it from running unwanted scripts or accessing the parent’s DOM. - Add
allowattribute for specific features (e.g.,allow='camera; microphone') only when required. - Serve the embedded resource over HTTPS to avoid mixed‑content warnings.
Quick checklist for embeds
<iframe>has a cleartitle? ✅sandboxattribute applied where appropriate? ✅- Fallback content inside
<object>for unsupported browsers? ✅ - Resources loaded over HTTPS? ✅
loading='lazy'applied to large iframes? ✅
Tip: Combine
loading='lazy'withsandboxfor off‑screen iframes to improve performance and security.