El hipervínculo fundamental. Atributos clave: href (URL, mailto:, tel:, #ancla), target="_blank" (siempre añade rel="noopener noreferrer" por seguridad), download (descarga en vez de navegar), rel="nofollow" (SEO: no transferir autoridad a ese enlace).

Incrusta una imagen. Atributos obligatorios: src y alt (descripción para lectores de pantalla y cuando la imagen no carga; usa alt="" para imágenes puramente decorativas). Siempre incluye width y height para evitar el CLS (Cumulative Layout Shift). Añade loading="lazy" en imágenes bajo el fold.

alt="Imagen de prueba"

Permite múltiples fuentes de imagen responsivas. El navegador elige la más adecuada según media (ancho de viewport) o type (formato soportado, útil para WebP/AVIF con fallback a JPEG). El <img> al final es obligatorio como fallback y para el atributo alt.

<picture>
  <source media="(min-width:800px)"
    srcset="grande.jpg">
  <source media="(min-width:400px)"
    srcset="mediana.jpg">
  <img src="pequeña.jpg" alt="...">
</picture>

Agrupa contenido ilustrativo autocontenido — imagen, diagrama, gráfico, fragmento de código, tabla — con su leyenda opcional <figcaption>. El contenido puede moverse a otra parte del documento sin afectar el flujo principal. <figcaption> puede ir al inicio o al final de <figure> y complementa (no duplica) el atributo alt de la imagen.

Si la imagen ya tiene un alt descriptivo y un <figcaption>, usa alt="" para evitar que los lectores de pantalla repitan la misma descripción dos veces. El <figcaption> será el texto accesible.

Incrusta vídeo HTML5 de forma nativa. Atributos importantes: controls (muestra la barra del navegador), muted (necesario para autoplay en la mayoría de navegadores), poster (imagen mientras carga), preload="none|metadata|auto", playsinline (evita pantalla completa en iOS).

<video controls width="320" poster="thumb.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tu navegador no soporta video.
</video>

Incrusta audio HTML5 de forma nativa sin plugins. Admite múltiples <source> como fallback de formatos: el navegador usa el primero que soporta. El atributo controls muestra la barra de reproducción nativa del navegador. Para podcasts y música, ofrece formatos MP3 (soporte universal) y OGG/Opus (menor tamaño). El texto de fallback entre las etiquetas se muestra solo en navegadores muy antiguos.

Los formatos más compatibles: MP3 es universal (todos los navegadores modernos). OGG Vorbis tiene mejor compresión pero no lo soporta Safari sin plugins. Ofrece siempre MP3 como fuente final de fallback.

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mp3">
  Tu navegador no soporta audio.
</audio>

Elemento vacío que especifica fuentes de medios alternativas dentro de <video>, <audio> y <picture>. El navegador evalúa los <source> en orden y usa el primero compatible. En <video>/<audio>, el atributo type permite al navegador descartar formatos no soportados sin descargarlos. En <picture>, usa media para condiciones de viewport y type para formatos de imagen.

Siempre incluye el atributo type en elementos <source> de video/audio. Sin él, el navegador debe descargar y probar cada archivo antes de decidir si puede reproducirlo, desperdiciando ancho de banda.

<source src="video.mp4"
        type="video/mp4"
        media="(min-width: 600px)">

Define pistas de texto temporizadas para <video> y <audio> en formato WebVTT (.vtt). El atributo kind clasifica el tipo de pista: subtitles (traducción del audio), captions (subtítulos para sordos, incluye efectos de sonido), descriptions (descripción visual para ciegos), chapters (para navegación) y metadata (datos para scripts). El atributo default selecciona la pista activa por defecto.

Añadir subtítulos en <track kind="captions"> es un requisito de accesibilidad (WCAG 1.2.2) para todo video con audio. No es opcional si quieres cumplir estándares de accesibilidad.

<video controls>
  <source src="video.mp4">
  <track kind="subtitles"
    src="subs-es.vtt"
    srclang="es"
    label="Español" default>
</video>

Incrusta otra página HTML dentro de la actual. Atributos de seguridad importantes: sandbox (restringe permisos), allow (permisos explícitos como "camera"), referrerpolicy. Añade siempre title para accesibilidad y loading="lazy" para iframes fuera del viewport.

<iframe
  src="https://www.openstreetmap.org/export/embed.html"
  width="300" height="200"
  title="Mapa embebido"
  loading="lazy">
</iframe>

Incrusta contenido externo a través de un plugin del navegador. Fue diseñado originalmente para Flash y otros plugins, hoy prácticamente en desuso. Sus usos actuales más comunes son PDFs y SVGs directamente en el documento. Es un elemento vacío sin cierre. Para PDFs, <iframe> o <object> ofrecen más control y mejor fallback.

<embed> no tiene mecanismo de fallback nativo: si el plugin no está disponible, no se muestra nada. Prefiere <object> (con contenido fallback) o <iframe> para PDFs en producción.

<embed src="archivo.pdf"
       type="application/pdf"
       width="400" height="300">

Incrusta un recurso externo — PDF, imagen, HTML anidado o contenido de plugin. A diferencia de <embed>, admite contenido de fallback entre sus etiquetas de apertura y cierre: si el navegador no puede mostrar el objeto, renderiza el contenido interior. Puede anidarse: <object> → <object> → <p> fallback texto. Sus atributos data, type, width y height son los principales.

Para PDFs accesibles, <object> con fallback a un enlace de descarga es la solución más robusta: <object data="doc.pdf" type="application/pdf"><a href="doc.pdf">Descargar PDF</a></object>.

<object data="archivo.pdf"
        type="application/pdf"
        width="400" height="300">
  <p>Fallback si no carga</p>
</object>

Implementa mapas de imagen (image maps): zonas clicables sobre una imagen. <map> agrupa las zonas y se vincula a la imagen mediante el atributo name en el mapa y usemap="#nombre" en la imagen. Cada <area> define una zona con su forma (rect, circle, poly), coordenadas, enlace y texto alternativo. Hoy en día es poco usado, pero sigue siendo válido para diagramas interactivos.

Para accesibilidad, cada <area> debe tener un atributo alt descriptivo. Los usuarios de teclado pueden tabular entre las zonas y activarlas con Enter.

Haz clic en cada zona

Lienzo de dibujo programático controlado enteramente por JavaScript. Soporta dos APIs: el contexto 2D (getContext('2d')) para gráficos rasterizados, y WebGL/WebGPU (getContext('webgl')) para gráficos 3D acelerados por GPU. El contenido del canvas es píxeles, no DOM — no es accesible por lectores de pantalla. Por eso el texto de fallback entre las etiquetas es importante, y en visualizaciones complejas se debe añadir role="img" y aria-label.

Define siempre width y height como atributos HTML, no solo con CSS. Los atributos definen la resolución interna del canvas; CSS solo escala su visualización, lo que puede causar imágenes borrosas en pantallas de alta densidad (Retina).

Gráficos vectoriales escalables incrustados directamente en el HTML. Los SVG son parte del DOM: sus elementos son accesibles, estilizables con CSS, animables con CSS/SMIL/JS y seleccionables con JavaScript. No pierden calidad al escalar, por lo que son ideales para iconos, logos, diagramas e ilustraciones en cualquier resolución. Para SVGs decorativos, añade aria-hidden="true"; para SVGs significativos, usa <title> y <desc> dentro del SVG.

Usar viewBox sin width/height fijos hace el SVG responsivo: se adapta al tamaño del contenedor con CSS (svg { width: 100%; height: auto; }).