6.8. Empotrados¶

HTML5 dispone de una amplia capacidad para empotrar recursos de muy diverso tipo, más allá del simple elemento en línea <img> para incrustar imágenes. El epígrafe está dedicado a explorar superficialmente cuáles son.

6.8.1. Imágenes¶

HTML5 dispone de varios elementos relacionados con la incrustación de imágenes[1]:

Elementos relacionados con las imágenes.¶
<picture>	Define fuentes alternativas para una misma imagen.
<source>	Fuenete alternativa para una imagen y criterios para seleccionarla.
<img>	Define una imagen.
<svg>	Incluye directamente un <svg> dentro de documento.

img (img)

Ya se trató este elemento páginas atrás, pero ampliaremos su definición con algunas incorporaciones que ha sufrido en HTML5:

Atributos HTML5 de <img>¶
srcset	urls	URLs a distintas versiones de la imagen
sizes	tam	Tamaños que ocupará la imagen

Los nuevos atributos facilitan el diseño adaptable. scrset enumera, separadas por comas, las URLs donde se encuentran las imágenes junto al ancho que tiene cada una. Por ejemplo:

srcset="imagen640.jpg 640w, imagen800.jpg 800w, imagen1500.jpg 1500w"

Este valor del atributo indica que tenemos tres alternativas la primera de las cuales tiene una anchura de 640px, la segunda de 800px y la tercera de 1500px[2].

sizes, por su parte, indica cuál debe ser el tamaño con el que se muestre la imagen. Por ejemplo[3]:

<img src="imagen640jpg"
     sizes="100vw"
     srcset="imagen640.jpg 640w, imagen800.jpg 800w, imagen1500.jpg 1500w">

indica que la imagen cubrirá toda el área útil de visualización (o sea, el 100% de viewport width). Este, no obstante, es su valor predeterminado, así que podríamos habérnoslo ahorrado. La gracia de sizes es que permite indicar varios valores con la condición para escoger uno u otro:

<img src="imagen640jpg"
     sizes="(max-width: 640px) 100vw, 50vw"
     srcset="imagen640.jpg 640w, imagen800.jpg 800w, imagen1500.jpg 1500w">

La condición se expresa del mismo modo que se escribe la regla CSS @media. En el ejemplo, para dispositivos con áreas de menos de 640px de ancho la imagen ocupará todo el ancho y en caso contrario, el 50%.

Ver también

Para aprender sobre unidades de medidas (relativas) puede echarle un ojo al excelente artículo Aprende unidades CSS.

picture (picture)

Es un elemento en línea que sirve para incrustar una imagen, pero ofreciendo URL alternativas, a fin de que el navegador puede seleccionar aquella que sea más adecuada para mostrarse. Puede contener ninguno, uno o más elementos <source> y un elemento final <img>. La misión de los elementos <source> es definir URL alternativas para la imagen y qué criterio debe seguirse para su selección, mientras que <img> define el elemento imagen en sí. En definitiva, <picture> amplía las posibilidades de seleccionar la versión adecuada de la imagen.

El elemento no define ningún atributo particular.

source (source)

Define una URL como fuente de una imagen en base a una serie de criterios.

Atributos de <source>¶
srcset	urls	Idéntico significado que para <img>
sizes	tam	Idéntico significado que para <img>
media	regla	Reglas de consulta de medios.
type	mime	Tipo MIME asociado a la fuente.

El elemento <source> se define exactamente igual que <img> en lo referente a srcset y sizes, pero además pueden añadir el atributo type para especificar qué de qué tipo es el recurso y media para especificar reglas media.

Por ejemplo:

<picture>
   <source type="image/svg" srcset="logo.svg" sizes="200px">
   <img src="imagen.png" alt="Nuestro logo">
</picture>

El navegador escogerá el logo <svg> en caso de que lo soporte; en caso contrario usará el PNG.

Ver también

Éche un vistazo a este extenso artículo para profundizar en la materia.

svg (developer.mozilla.org: svg)

Las imágenes en formato <svg> pueden incrustarse en el documento a través del elemento <img>:

<img src="japon.svg" alt="Bandera del Japón">

Sin embargo, HTML5 permite incluir directamente el elemento <svg> dentro del documento como si de un elemento HTML se tratara (aunque obviamente no lo es):

<!DOCTYPE html>
<html lang="es">
   <title>Prueba</title>
   <meta charset="UTF-8">

   <!-- Bandera del Japón -->
   <svg role="img" aria-labelledby="japan" xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 900 600">
      <title id="japan">Bandera de Japón</title>
      <rect fill="#fff" height="600" width="900"/>
      <circle fill="#bc002d" cx="450" cy="300" r="180"/>
   </svg>
</html>

Nota

Nótese que <svg> no tiene atributo alt como <img> por lo que tendremos que recurrir a los atributos ARIA para paliarlo y asegurar la accesibilidad.

Ver también

Si tiene curiosidad, puede este artículo sobre los distintos modos de incrustar SVG dentro de un HTML.

6.8.2. Audio y video¶

HTML5 permite referenciar directamente en el documento tanto archivos de audio como archivos de vídeo, de modo que el navegador será capaz de reproducirlos sin recurrir a tecnologías externas como Flash, a las que se tenía que recurrir anteriormente.

Elementos relacionados con vídeo y audio¶
<audio>	Incrusta un archivo de sonido en el documento
<video>	Incrusta un archivo de vídeo en el documento

Ambas etiqueta funcionan de un mismo modo, así que podemos darle un tratamiento conjunto.

audio (audio), video (video)

Empotran audio y vídeo respectivamente en el documento. Su uso básico es bastante sencillo:

<audio src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Marcha_Real_%281915%29.ogg"
       controls>

que muestra un reproductor muy básico para que seamos capaces de manipular la reproducción del archivo. Disponen, no obstante, de más atributos:

Atributos de <audio> y <video>¶
src	url	Dirección donde se encuentra el archivo
controls	-	Muestra controles para su reproducción
preload	auto\|metadata\|none\|	Define si se descarga el archivo automáticamente, si sólo los metadatos o si no se descarga hasta que el usuario intente su reproducción.
autoplay	-	El archivo debe reproducirse automátcamente.
loop	-	El archivo debe reproducirse en bucle.
muted	-	Reproducción en silencio

El elemento video presenta, además, estos atributos adicionales:

Atributos de <video> (pero no de <audio>)¶
width	num	Anchura en píxeles del área de visualización.
height	num	Altura en píxeles del área de visualizacíón
poster	url	Imagen que se muestra mientras se descarga el vídeo.
playsinline	-	El vídeo debe reproducirse en el lugar en que se ha empotrado.

En cuanto al soporte de codecs, son ampliamente soportados:

audio: mp3, aac, flac, opus
vídeo: mp4, webm, ogv. hevc

Ver también

En emezeta.com hay un interesante artículo sobre formatos de vídeo y audio.

Aunque las posibilidades vistas para <audio> y <video> son ya abundantes, HTML5 ofrece aún más. Ambos elementos pueden actuar como contenedores al modo en que lo hace <picture> para imágenes.

Elementos que pueden contener <video> y <audio>¶
<source>	Tiene la misma funcionalidad y características que cuando se usa dentro de <picture>.
<track>	Añade texto como subtítulos, información adicional, etc.

<source> podemos usarlo con el mismo fin que cuando lo utilizamos con <picture>: ofrece al navegador versiones en distinto formato. La condición para poder incluirlo como contenido de <video> o <audio> es que no se haya usado con estos elementos el atributo src:

<video control>
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">
   <img src="images/nossuport.jpg" alt="No se soporta vídeo empotrado">
</video>

Nota

Observe que hay algunas diferencias con su uso en <picture>. En este caso, se usa el atributo src y no srcset. Además, no se soporta ni sizes ni media. Vea también que podemos incluir al final algún elemento que se muestre de forma alternativa en caso de que no haya soporte para vídeos empotrados.

track (track)

<track>, por su parte, puede incluirse como contenido siempre, incluso aunque <video> o <audio> tengan atributo src. Añade al audio o el vídeo información textual de distinto tipo (subtítulos, información para ciegos, información para sordos, etc.). Tiene estos atributos:

Atributos de <video> (pero no de <audio>)¶
default	-	Pista predeterminada
label	text	Etiqueta para identificar la pista
src	url	Dirección de la pista (se usa el formato vtt
srclang	idioma	Idioma de la pista
kind	subtitles\|captions\|descriptions\|chapters\|metadata	Tipo de pista.

Dependendiendo de cuál sea la naturaleza de la información textual, así será el tipo de pista:

subtitles: Son los subtitulos que ayudan a comprender los diálogos a una persona que desconoce el idioma en que se lleven a cabo.
captions: Son apropiadas para personas sordas, por lo que incluyen no sólo diálogo sino también descripciones sobre efectos de sonidos.
descriptions: Descripciones de la imagen para personas ciegas.
chapters: Información sobre las partes en que se divide el archivo multimedia.
metadata: Ofrecen metadatos sobre el contenido, a los que se puede acceder mediante programación en Javascript.

Ejemplo:

<video control>
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm">
   <track srclang="es" src="subtitulos.es.vtt" kind="subtitles" label="Subs esp">
   <track srclang="it" src="subtitulos.it.vtt" kind="subtitles" label="Subs ita">
   <img src="images/nossuport.jpg" alt="No se soporta vídeo empotrado">
</video>

6.8.3. Contenido externo¶

Dentro de un documento HTML podemos incrustar tipo de contenidos distinto a los ya vistos de imágenes, audio o vídeo. El epígrafe está dedicado a analizarlos cuáles son los elementos que lo posibilitan.

Elementos que incrustar otro tipo de contenido.¶
<iframe>	Permite incrustar un documento HTML independiente dentro del propio HTML.
<embed>	Inserta contenido externo provisto por una aplicación externa (plugins)
<object>	Permite incustrar contenido externo que puede ser tratado como una imagen, un documento HTML independiente o un contenido provisto por una aplicación externa,
<param>	Define parámetros para un elemento <object>

iframe (iframe)

Es un elemento en línea que permite incrustar un contexto anidado de navegación (o sea, otro documento HTML).

Etiquetas relevantes de <iframe>¶
width	anchura	Anchura del <iframe>.
height	altura	Altura del <iframe>
src	url	URL del contenido
name	nombe	Nombre de el <iframe> para poder hacer referencia a él (con <a>, por ejemplo).

Es muy común que servicios de internet como Youtube o Ivoox permitan incrustar sus contenidos a través de esta etiqueta. Ejemplos:

<iframe id="audio_2543335" frameborder="0" allowfullscreen="" scrolling="no"
        height="200" style="border:1px solid #EEE; box-sizing:border-box; width:100%;"
        src="https://www.ivoox.com/player_ej_2543335_4_1.html?c1=ff6600">
   No se puede reproducir este contenido.
</iframe>

Prudencia

No siempre es posible empotrar un documento HTML dentro de otro, porque puede ocurrir (y es bastante frecuente) que el servidor donde se encuentre el documento que se desea empotrar no lo permita a través de las cabeceras X-Frame-Options o Content-Security-Policy. Esta limitación tenemos que tenerla en cuenta también al empotrar con <object>.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0"
        marginwidth="0" style="border: 1px solid black"
        src="https://www.openstreetmap.org/export/embed.html?bbox=-7.323015332221986%2C37.19594164560528%2C-7.317221760749818%2C37.199620737391655&amp;layer=mapnik">
   Esto debería haber sido un mapa de OpenStreetMap.
</iframe>

Nota

Es muy común que los servicios que permiten incrustar sus contenidos en nuestras páginas, facilten el código exacto para llevar a cabo la tarea.

embed (embed)

El elemento suele usarse para incrustar contenido visualizable a través de un plugin. Es un elemento vacío.

Etiquetas relevantes de <iframe>¶
width	anchura	Anchura del elemento <embed>.
height	altura	Altura del elemento <embed>
src	url	URL del contenido
type	mime	Tipo MIME para poder seleccionar el plugin adecuado

Ejemplo:

<embed width=600 height=400 type="application/pdf"
       src="https://www.juntadeandalucia.es/boja/2010/168/boletin.168.pdf">

Nota

Por supuesto, el elemento también sirve para empotrar contenido flash, pero la tecnología se ha ido abandonando paulatinamente con el triunfo de HTML5 y es común que los navegdores modernos ni siquiera tengan soporte para ella.

object (object)

Por su parte, este elemento permite empotrar contenido externo que puede ser otro contexto de navegación (como <iframe>), visualizable a través de plugins (como <embed>) o una imagen.

Etiquetas relevantes de <object>¶
width	anchura	Anchura del elemento <object>.
height	altura	Altura del elemento <object>
data	url	URL del contenido.
type	mime	Tipo MIME del contenido.
name	nombre	Nombre del contexto de navegación
form	idref	Permite asociar el objeto con un formulario[4]

Por ejemplo, esto empotraría un documento de texto:

<object data="https://mozilla.github.io/fathom/_sources/ruleset.rst.txt"
        height=400 width=600 type="text/plain">Recurso no disponible</object>

Esto una página web:

<object data="https://sio2sio2.github.io/doc-linux"
        height=400 width=100% type="text/html">Recurso no disponible</object>

Muestra una imagen:

<object data="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg"
        width=400 type="image/svg+xml">Recurso no disponible</object>

Notas al pie

6.8. Empotrados¶

6.8.1. Imágenes¶

6.8.2. Audio y video¶

6.8.3. Contenido externo¶

Page contents

Previous page

Next page

Esta página