Marcos e inserciones

Muestra un archivo externo, como un PDF, con el visor que tenga el navegador. No ofrece contenido alternativo, así que ponle un título.

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

Con estilos de elements/media.css, sin clase.

Muestra otra página web dentro de esta, aquí una pequeña escrita en el propio documento mediante srcdoc. Ponle siempre un título y carga el contenido de forma diferida si queda por debajo del pliegue.

<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>

Con estilos de elements/media.css, sin clase.

Muestra un archivo externo, como un PDF o una imagen, y admite contenido alternativo en su interior para cuando no se pueda cargar el archivo.

<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>

Con estilos de elements/media.css, sin clase.

Ofrece al navegador varias versiones de una imagen para que elija la más adecuada según el ancho, el formato del archivo o la densidad de píxeles. Debe contener un elemento 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>

Con estilos de elements/media.css, sin clase. Reduce la ventana por debajo de 30rem y picture cambia a la imagen compacta.

Una opción de archivo dentro de picture, audio o video. El navegador usa la primera que puede reproducir.

<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 no añade estilos: se mantiene el aspecto del navegador.