Skip to main content

HTML Embedded Content

Most of a web page is your own text, images, and links. But a lot of the best parts of the web are made by someone else, or made differently: a map of your shop, a video player, a payment form, a live chart, a game, a PDF guide, a drawn diagram.

Embedded content is any such content that you place inside your page. HTML gives you a few elements for it, and each one has a different job, a different level of trust, and different effects on speed, accessibility, and security.


What You Will Learn in This Section​

  • Showing another page inside yours with <iframe>
  • Where <embed> and <object> fit today
  • Drawing sharp, scalable graphics with SVG
  • Drawing pixels with canvas
  • Adding maps to a page
  • Keeping your visitors safe when you embed third-party content

The Big Idea​

index.html
<!-- Another page, inside yours -->
<iframe src="https://example.com/widget" title="Booking widget" loading="lazy"></iframe>

<!-- A graphic that is part of your page -->
<svg viewBox="0 0 100 100" role="img" aria-labelledby="t">
  <title id="t">A blue circle</title>
  <circle cx="50" cy="50" r="40" fill="#2563eb"/>
</svg>

<!-- A drawing surface for scripts -->
<canvas id="stage" width="400" height="300">A short description.</canvas>

<!-- An older way to embed a file -->
<object data="guide.pdf" type="application/pdf" width="600" height="400">
  <a href="guide.pdf">Download the guide (PDF)</a>
</object>

Pick each method above, and read the table underneath. The most important difference is the first row: does the content have its own separate document?

  • A separate document (iframe, object) works like a window onto another page. It keeps its own styles and scripts, and you cannot easily reach inside it. That makes it good for isolation, and a risk if you do not trust it.
  • Content that is part of your page (inline SVG, canvas) is yours to style and script, but it is also yours to make accessible.

Which Element Should I Use?​

index.html
<!-- A map, a player, a widget -->
<iframe src="…" title="…" loading="lazy"></iframe>

<!-- An icon or diagram -->
<svg viewBox="0 0 24 24" role="img" aria-labelledby="t">…</svg>

<!-- A game or image effect -->
<canvas width="400" height="300">…</canvas>

What Is in This Section​

Good Habits from the Start​

Four ideas that return in every lesson:

  1. Give it a name. An iframe needs a title, an svg needs a title, and a canvas needs fallback text or a label. Unnamed embeds are invisible to assistive technology.
  2. Give it a shape. Set a size or aspect-ratio, so the page does not jump while the content loads.
  3. Load it lazily. Embeds are heavy. Use loading="lazy" on iframes, and do not load what nobody has asked for.
  4. Trust no one by default. Content from another site can run code, set cookies, and track your visitors. Restrict what it may do.
An embed is a promise

When you embed someone else's page, your visitors cannot tell where your page ends and theirs begins. If that page is hacked, changed, or tracks people, it looks like it comes from you. Embed only what you trust, and limit what it can do. The last lesson in this section is all about this.

Accessibility at a Glance​

  • Title every iframe, and give SVG and canvas a text alternative.
  • Keep keyboard users able to get in and out of every embedded player. Never trap the keyboard.
  • Provide a link or text version for important content: a map's address, a chart's data table, a PDF's download link.
  • Do not rely on a picture of text inside an embed.
  • Make embeds work at 200% zoom and on narrow screens.
  • Avoid embeds that autoplay or flash.

Security and Privacy Notes​

  • Embedded third-party content can track visitors, even before they click on it. Load it after consent where the law requires it.
  • Use sandbox to remove permissions you do not need, and referrerpolicy to limit what the other site learns.
  • Use HTTPS for everything you embed.
  • Do not let visitors choose the address an iframe loads, without checking it against an allow-list.
  • Remember your own page can be framed by others. Use Content-Security-Policy: frame-ancestors to control that.
  • Do not put secrets in the page source, including the source of embeds, maps, and SVG.

Global Audience Notes​

  • Embeds are heavy for slow and metered connections. Use lazy loading, and a lightweight click-to-load placeholder for big players and maps.
  • Some services are blocked in some countries, or slow there. Offer a plain link or text alternative as a fallback.
  • Check the language of embedded content and whether it supports your visitors' languages.
  • Use logical CSS properties and test right-to-left pages for embedded widgets.
  • Cookie and privacy laws differ by region. A consent pattern that works in one country may not be enough in another.

Common Mistakes to Avoid​

  1. An iframe with no title.
  2. No size or aspect ratio, so the page jumps.
  3. Loading every embed immediately, so the page is slow.
  4. Embedding a page you do not trust, with no sandbox.
  5. A canvas with nothing for screen readers.
  6. An SVG with no title, when it carries meaning.
  7. Using embed or object for things an iframe or img does better.
  8. Embedding content that cannot be reached by keyboard.
  9. Giving the only copy of important information to a third party (a map with no address in text).
  10. Forgetting HTTPS, so the embed is blocked.
  11. Forgetting that the embed can see and set cookies.
  12. No fallback when the embed fails to load.

Practice Time​

Try these in your editor:

  1. Add an iframe with a srcdoc page and a title.
  2. Add sandbox="" to it, and see what stops working.
  3. Add a small inline SVG with a title.
  4. Draw a rectangle on a canvas, with fallback text inside it.
  5. Put a PDF in an object, with a download link as a fallback.
  6. Give the iframe a fixed aspect-ratio, and check that the page does not jump.
  7. Add loading="lazy", and see when the file is requested.
  8. Tab through the page, and check that you can get past every embed.
  9. Turn off images and scripts, and see what each embed leaves behind.
  10. Bonus: list every third-party host your own site loads from, and ask whether you need each one.

Quick Recap​

Click a question to check your answer.

1. What is embedded content?

Content placed inside your page that is made by someone else, or in another format: pages, players, maps, PDFs, drawings, and canvases.

2. What is the main difference between an iframe and an inline SVG?

An iframe is a separate document with its own styles and scripts, so it is isolated from your page. Inline SVG is part of your page, so your CSS and scripts can reach every shape.

3. Which element suits a game or image effect?

canvas, because you draw pixels with JavaScript. It is not accessible by default, so you must add fallback content and your own text alternative.

4. Why give every embed a name?

Assistive technology lists embeds by name. A frame with no title, or an SVG or canvas with no text alternative, is just an unnamed object, so users cannot tell what it is.

5. Why is third-party content a security concern?

It runs code from someone else on your visitors' devices, can set cookies, and can track them, yet it looks like part of your site. Restrict it with sandbox, limit what it learns, and ask for consent where needed.

Key Takeaways​

  • Embedded content brings pages, players, maps, files, and drawings into your page.
  • iframe embeds other pages, object and embed are older ways to embed files, SVG draws scalable graphics, and canvas draws pixels with script.
  • Separate documents are isolated, and part-of-page content is yours to make accessible.
  • Always name, size, and lazy-load your embeds.
  • Never trust embedded content by default. Use sandbox, HTTPS, and limits, and plan for failure.
  • Give important information a text version: an address, a data table, or a download link.
  • Plan for slow connections, blocked services, many languages, and different privacy laws.

Ready to start? Begin with Iframe, the most common way to embed content.