Frames and embeds

Shows an external file, such as a PDF, with whatever viewer the browser has. It has no fallback content, so give it a title.

<embed src="shapes.svg" type="image/svg+xml" width="240" height="120" title="A blue square and a grey circle">

Styled by elements/media.css, with no class.

Shows another web page inside this one, here a small one written in place with srcdoc. Always give it a title, and load it lazily when it is below the fold.

<iframe srcdoc="&lt;p&gt;A separate document, embedded in this page.&lt;/p&gt;"
  title="An embedded example document" loading="lazy" width="320" height="120"></iframe>

Styled by elements/media.css, with no class.

Shows an external file, such as a PDF or an image, and takes fallback content inside for when the file cannot load.

<object data="shapes.svg" type="image/svg+xml" width="240" height="120" aria-label="A blue square and a grey circle">
  A blue square and a grey circle
</object>

Styled by elements/media.css, with no class.

Gives the browser several versions of one image so it can pick the best fit: by width, by file format or by pixel density. It must contain an img.

<picture>
  <source media="(max-width: 30rem)" srcset="shapes-compact.svg">
  <img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120">
</picture>

Styled by elements/media.css, with no class. Make the window narrower than 30rem and the picture switches to the compact image.

One file option inside a picture, audio or video. The browser takes the first one it can use.

<picture>
  <source srcset="shapes.svg" type="image/svg+xml">
  <img src="shapes.svg" alt="A blue square and a grey circle" width="240" height="120">
</picture>

LUZ adds no style: the browser look is kept.