Ejemplos (izquierda) y vista gráfica (derecha) con colores relacionados por etiqueta.

Ejemplo completo (todas las etiquetas)

<figure>
  <picture>
    <source srcset="imagen.webp" type="image/webp">
    <img src="imagen.jpg" alt="Imagen de ejemplo">
  </picture>
  <figcaption>Leyenda de la imagen</figcaption>
</figure>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls width="360">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitulos.vtt" srclang="es" label="Español">
</video>

<iframe src="https://example.com" width="360" height="200"></iframe>

<embed src="archivo.pdf" type="application/pdf" width="360" height="200">

<object data="archivo.pdf" type="application/pdf" width="360" height="200">
  <param name="view" value="Fit">
</object>

<canvas width="360" height="120"></canvas>

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="45"></circle>
</svg>

Jerarquía lógica

figure
├─ picture → source* + img
└─ figcaption

audio → source*
video → source* + (track*)

object → (param*)
iframe / embed
canvas / svg

6) Multimedia

Ejemplo completo (todas las etiquetas)

Jerarquía lógica

Vista gráfica (misma paleta)