Imágenes, sonido, vídeo, gráficos y otras páginas dentro de la tuya.
<img>: Una imagen.
<video>: Un vídeo con su reproductor.
<iframe>: Otra página dentro de la tuya, en un marco.
<svg>: Un gráfico vectorial (SVG) escrito dentro del HTML.
Imágenes, sonido, vídeo, gráficos y otras páginas dentro de la tuya. Los ejemplos de audio y vídeo no muestran resultado porque necesitan un fichero tuyo.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Una imagen. Es un elemento vacío. alt es obligatorio: describe la imagen para quien no la ve (o va vacío, alt="", si es decorativa). Pon width y height para que la página no salte al cargar.
Valores: src, alt, width, height, loading="lazy", srcset, sizes
Varias versiones de una imagen para que el navegador elija: otro formato (AVIF, WebP) u otro encuadre según el ancho de pantalla. Dentro, varios <source> y un <img> al final, que es el que se usa si no vale ninguno.
Una opción de fichero dentro de <picture>, <video> o <audio>. El navegador usa la primera que puede reproducir.
Valores: src o srcset, type, media
Esencial. Un vídeo con su reproductor. controls muestra los botones; para un vídeo de fondo, autoplay muted loop playsinline (sin sonido: si no, el navegador no lo reproduce solo).
Valores: controls, poster, autoplay, muted, loop, playsinline, preload
Un sonido con su reproductor: un pódcast, una canción, un efecto.
Valores: controls, autoplay, loop, muted, preload
Subtítulos, capítulos o descripciones de un vídeo, en un fichero de texto WebVTT (.vtt). Los subtítulos hacen el vídeo accesible a quien no oye.
Valores: kind (subtitles, captions, chapters, descriptions), src, srclang, label, default
Esencial. Otra página dentro de la tuya, en un marco: un vídeo de YouTube, un mapa, una presentación. Ponle title para decir qué es.
Valores: src, srcdoc, title, width, height, loading="lazy", allow, sandbox
Incrusta un recurso externo que maneja el navegador o un complemento (un PDF, por ejemplo). Es un elemento vacío. Hoy se usa poco.
Incrusta un recurso externo (un PDF, un SVG) con contenido alternativo dentro, por si no se puede mostrar.
Un mapa de imagen: zonas de una imagen que son enlaces. Se une a la imagen con usemap.
Una zona pulsable dentro de un <map>: rectángulo, círculo o polígono. Lleva alt.
Valores: shape (rect, circle, poly), coords, href, alt
Esencial. Un gráfico vectorial (SVG) escrito dentro del HTML: iconos, logotipos, ilustraciones que no pierden calidad y que puedes cambiar con CSS.
Fórmulas matemáticas en MathML, el lenguaje de marcado para matemáticas.
Un lienzo en el que se dibuja con JavaScript: gráficos, juegos, generativo.
Imágenes, sonido, vídeo, gráficos y otras páginas dentro de la tuya.
Código del tema: <img src="foto.svg" alt="Montañas azules con un sol amarillo
Imágenes, sonido, vídeo, gráficos y otras páginas dentro de la tuya. Los ejemplos de audio y vídeo no muestran resultado porque necesitan un fichero tuyo.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. Una imagen. Es un elemento vacío. alt es obligatorio: describe la imagen para quien no la ve (o va vacío, alt="", si es decorativa). Pon width y height para que la página no salte al cargar.
Valores: src, alt, width, height, loading="lazy", srcset, sizes
Varias versiones de una imagen para que el navegador elija: otro formato (AVIF, WebP) u otro encuadre según el ancho de pantalla. Dentro, varios <source> y un <img> al final, que es el que se usa si no vale ninguno.
Una opción de fichero dentro de <picture>, <video> o <audio>. El navegador usa la primera que puede reproducir.
Valores: src o srcset, type, media
Esencial. Un vídeo con su reproductor. controls muestra los botones; para un vídeo de fondo, autoplay muted loop playsinline (sin sonido: si no, el navegador no lo reproduce solo).
Valores: controls, poster, autoplay, muted, loop, playsinline, preload
Un sonido con su reproductor: un pódcast, una canción, un efecto.
Valores: controls, autoplay, loop, muted, preload
Subtítulos, capítulos o descripciones de un vídeo, en un fichero de texto WebVTT (.vtt). Los subtítulos hacen el vídeo accesible a quien no oye.
Valores: kind (subtitles, captions, chapters, descriptions), src, srclang, label, default
Esencial. Otra página dentro de la tuya, en un marco: un vídeo de YouTube, un mapa, una presentación. Ponle title para decir qué es.
Valores: src, srcdoc, title, width, height, loading="lazy", allow, sandbox
Incrusta un recurso externo que maneja el navegador o un complemento (un PDF, por ejemplo). Es un elemento vacío. Hoy se usa poco.
Incrusta un recurso externo (un PDF, un SVG) con contenido alternativo dentro, por si no se puede mostrar.
Un mapa de imagen: zonas de una imagen que son enlaces. Se une a la imagen con usemap.
Una zona pulsable dentro de un <map>: rectángulo, círculo o polígono. Lleva alt.
Valores: shape (rect, circle, poly), coords, href, alt
Esencial. Un gráfico vectorial (SVG) escrito dentro del HTML: iconos, logotipos, ilustraciones que no pierden calidad y que puedes cambiar con CSS.
Fórmulas matemáticas en MathML, el lenguaje de marcado para matemáticas.
Un lienzo en el que se dibuja con JavaScript: gráficos, juegos, generativo.