🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Exercises.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
REFERENCEhtml

html Documentation

📖 INDEX

# helloworld
# comments-html
# html-tag
# head-tag
# body-tag
# p-tag
# b-tag
# i-tag
# strong-tag
# em-tag
# s-tag
# cite-tag
# blockquote-tag
# sub-tag
# sup-tag
# u-tag
# big-tag
# tt-tag
# pre-tag
# q-tag
# code-tag
# samp-tag
# var-tag
# abbr-tag
# acronym-tag
# address-tag
# ins-tag
# strike-tag
# span-tag
# hr-tag
# title-tag
# meta-tag
# base-tag
# link-tag
# a-tag
# script-tag
# noscript-tag
# style-tag
# div-tag
# h1-tag
# h2-tag
# h3-tag
# h4-tag
# h5-tag
# h6-tag
# ul-tag
# ol-tag
# li-tag
# dl-tag
# dt-tag
# dd-tag
# menu-tag
# dir-tag
# table-tag
# tr-tag
# th-tag
# td-tag
# thead-tag
# tbody-tag
# tfoot-tag
# caption-tag
# col-tag
# colgroup-tag
# form-tag
# input-tag
# textarea-tag
# select-tag
# option-tag
# button-tag
# label-tag
# fieldset-tag
# legend-tag
# datalist-tag
# optgroup-tag
# radio-buttons
# checkboxes
# submit
# reset
# input-types
# input-attributes
# meta-tags
# open-graph
# twitter-cards
# geotagging
# img-tag
# video-tag
# audio-tag
# iframe-tag
# map-tag
# area-tag
# object-tag
# param-tag
# applet-tag
# controls
# autoplay
# loop
# muted
# poster
# src
# type
# javascript-in-html
# basefont-tag
# bdo-tag
# font-tag
# frame-tag
# frameset-tag
# noframes-tag
LOADING ENGINE...

<iframe>

AI & DATA SCIENCE // iframe-tag

The <iframe> element embeds another HTML document inline within the current page, creating a nested browsing context.

Syntax

<iframe src="https://example.com/embed" width="600" height="400" title="Embedded content"></iframe>

Deep Dive Course

**`<iframe>`** loads an entirely separate document — often from another domain — inside a rectangular frame within the current page: a YouTube video embed, an embedded map, a payment widget, or a third-party comment system are all typically `<iframe>`s. The **`sandbox`** attribute can restrict what the embedded content is allowed to do (block scripts, forms, popups, etc.) for security when embedding untrusted content, and **`title`** is required for accessibility, since screen readers need a way to describe what the embedded frame contains.

1Understanding <iframe>

`<iframe>` loads an entirely separate document — often from another domain — inside a rectangular frame within the current page: a YouTube video embed, an embedded map, a payment widget, or a third-party comment system are all typically <iframe>s. The `sandbox` attribute can restrict what the embedded content is allowed to do (block scripts, forms, popups, etc.) for security when embedding untrusted content, and `title` is required for accessibility, since screen readers need a way to describe what the embedded frame contains.

💡

Content inside an iframe from a different origin (domain) can't be accessed or manipulated by your page's JavaScript at all by default — this cross-origin isolation is a deliberate browser security boundary, not a bug to work around.

editor.html
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560" height="315"
  title="YouTube video player"
  allowfullscreen>
</iframe>
localhost:3000

2Practical Example

Here is a real-world application of <iframe> showing how it is used in production HTML.

editor.html
<!-- Sandboxing an untrusted embed: no scripts, no form submission -->
<iframe src="https://untrusted-widget.example.com" sandbox="allow-same-origin" title="Third-party widget"></iframe>
localhost:3000

3Best Practices

Follow these guidelines when working with <iframe>:

1. Always include a descriptive title attribute for accessibility

2. Use the sandbox attribute to restrict untrusted embedded content's capabilities

3. Set explicit width/height (or CSS aspect-ratio) to avoid layout shift while the iframe loads

⚠️

Tip: Content inside an iframe from a different origin (domain) can't be accessed or manipulated by your page's JavaScript at all by default — this cross-origin isolation is a deliberate browser security boundary, not a bug to work around.

editor.html
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560" height="315"
  title="YouTube video player"
  allowfullscreen>
</iframe>
localhost:3000

Examples

Example 01Basic Usage
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560" height="315"
  title="YouTube video player"
  allowfullscreen>
</iframe>
Example 02Advanced Example
<!-- Sandboxing an untrusted embed: no scripts, no form submission -->
<iframe src="https://untrusted-widget.example.com" sandbox="allow-same-origin" title="Third-party widget"></iframe>

Best Practices

  • Always include a descriptive title attribute for accessibility
  • Use the sandbox attribute to restrict untrusted embedded content's capabilities
  • Set explicit width/height (or CSS aspect-ratio) to avoid layout shift while the iframe loads

Interview Question

Why can't a page's JavaScript directly read or manipulate the contents of a cross-origin <iframe>?▼

Hint: Think about the security implications if any site could freely inspect an embedded page from a different domain.

Browsers enforce the 'same-origin policy', which blocks JavaScript on the parent page from accessing the DOM, cookies, or JavaScript state of an iframe loaded from a different origin (protocol + domain + port) — and vice versa. Without this restriction, embedding someone else's page would let you silently read their embedded content's data (like a logged-in user's private information), which is exactly the kind of cross-site attack this isolation prevents. Controlled communication between them is only possible via postMessage, which both sides must explicitly opt into.

Exercises

EasyPractice using <iframe> in a real scenario.
View Solution
<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  width="560" height="315"
  title="YouTube video player"
  allowfullscreen>
</iframe>

Frequently Asked Questions

Why can't a page's JavaScript directly read or manipulate the contents of a cross-origin <iframe>?▼

Browsers enforce the 'same-origin policy', which blocks JavaScript on the parent page from accessing the DOM, cookies, or JavaScript state of an iframe loaded from a different origin (protocol + domain + port) — and vice versa. Without this restriction, embedding someone else's page would let you silently read their embedded content's data (like a logged-in user's private information), which is exactly the kind of cross-site attack this isolation prevents. Controlled communication between them is only possible via postMessage, which both sides must explicitly opt into.

Related Functions

object-tagvideo-tag