HTML Embedded Content: iframe, canvas, svg, and object

HTML Embedded Content Elements

HTML provides several elements for embedding external or generated content within a page, from third-party widgets to dynamic graphics.

iframe — Inline Frames

The most common embedding element for external content:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  title="Video title for accessibility"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
  sandbox="allow-scripts allow-same-origin"
  referrerpolicy="no-referrer"
></iframe>

Security attributes:

• sandbox — Restricts iframe capabilities (scripts, forms, popups)
• allow — Permission policy for features (camera, microphone, geolocation)
• referrerpolicy — Controls what referrer information is sent

canvas — Programmatic Graphics

<canvas id="chart" width="400" height="300" role="img" aria-label="Sales chart">
  Fallback content for browsers without canvas support.
</canvas>
<script>
  const ctx = document.getElementById('chart').getContext('2d');
  // Draw using Canvas 2D API or WebGL
</script>

svg — Vector Graphics

<svg viewBox="0 0 100 100" width="200" height="200" role="img" aria-label="Circle icon">
  <circle cx="50" cy="50" r="40" fill="currentColor" />
</svg>

SVG can be inline (as above), referenced via <img>, or embedded with <object>.

object and embed

<object data="document.pdf" type="application/pdf" width="600" height="400">
  <p>PDF viewer not available. <a href="document.pdf">Download PDF</a></p>
</object>

Best Practices

1. Always provide a title attribute on <iframe> for accessibility
2. Use sandbox on iframes to restrict capabilities
3. Add loading="lazy" to below-the-fold iframes and images
4. Provide fallback content inside <canvas>, <object>, and <iframe>
5. Use ARIA roles and labels on <canvas> and <svg> elements