DocHero
Lesson 11 +10 XP

Embedded Content

Embedded Content

Sometimes you want to put another page, or a special thing, inside your page. HTML has tags for that.

iframe: a window into another page

<iframe> embeds another web page inside yours. Like a window showing someone else's house.

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

iframe attributes

  • width and height: size of the window.
  • loading="lazy": only load when needed.
  • title: a description for screen readers (very important for iframes!).
<iframe src="map.html" title="A map of the park" loading="lazy"></iframe>

The security helpers

For extra safety with iframes:

  • sandbox: limits what the embedded page can do.
  • allow: lets you allow specific features (like a camera or fullscreen).
  • allowfullscreen: lets the page go fullscreen.
<iframe src="game.html" sandbox="allow-scripts" allowfullscreen></iframe>

embed: for plugins

<embed> is a quick way to embed a thing (like a PDF or a plugin).

<embed src="brochure.pdf" width="500" height="300">

object: a flexible container

<object> can embed different kinds of content, including images or PDFs, and has a data attribute.

<object data="report.pdf" type="application/pdf" width="500" height="300"></object>

param: parameters for object

<param> passes extra settings into an <object>.

New and experimental

  • <fencedframe>: a privacy-protected version of <iframe> used by some advertising tech. Very new, use it rarely!
  • <geolocation>: lets a page request the visitor's location permission. New and experimental.
  • <selectedcontent>: shows the currently selected option in a <select>. New and experimental.

These are cutting-edge. Keep an eye on MDN to see if they become standard!

TL;DR

  • <iframe> embeds another web page: always add a title.
  • <embed> quickly embeds things like PDFs.
  • <object> is a flexible container for external content.
  • <param> gives <object> extra settings.
  • Use sandbox, allow, and allowfullscreen for iframe safety.
  • <fencedframe>, <geolocation>, and <selectedcontent> are new and experimental.