Dos nuevos elementos son las etiquetas HTML5 FIGURE y FIGCAPTION. El primero, FIGURE, es bueno para cosas como imágenes y otros gráficos, mientras que FIGCAPTION se utiliza para decirle a la gente lo que están mirando. Como ejemplo, eche un vistazo a lo siguiente código:

img src="https://www.homeandlearn.co.uk/WD/york_images/york_minster.jpg"
Una vista de York Minster desde una calle lateral.

Aquí, hemos rodeado el código IMG con dos etiquetas FIGURA. Las etiquetas FIGCAPTION son y luego colocarla debajo de la imagen. Así es como se ve el código anterior en un navegador:

Agregar subtítulos a las imágenes

Puedes tener las etiquetas de FIGCAPTION encima de la imagen, si lo prefieres:

Una vista de York Minster desde una calle lateral. img src="https://www.homeandlearn.co.uk/WD/york_images/york_minster.jpg">

Note, sin embargo, que las etiquetas FIGURE y FIGCAPTIONS no están formateadas para tienes que hacerlo tú mismo con un poco de CSS:

FIGCAPTION {

estilo de letra: cursiva;
Variante de la fuente: small-caps;

}

Debido a que FIGURE y FIGCAPTION son nuevas etiquetas HTML5, los navegadores más antiguos no sabrán lo que son. Así que se representan en la página como etiquetas en línea. Lo que esto significa es que no tendrás un salto de línea automático para los pies de foto de tu figura: lo harán sólo estar al lado de las imágenes. La solución es usar la propiedad CSS con un valor de bloqueo. Así:

FIGURA, FIGCAPTION {

pantalla: bloque;
estilo de letra: cursiva;
Variante de la fuente: small-caps;

}

El CSS de arriba le dice al navegador que renderice las etiquetas FIGURE y FIGCAPTION como nivel de bloque elementos. Porque los elementos del nivel de bloque se apilan uno encima del otro, tu pie de foto estará en el lugar correcto, encima o debajo de tus imágenes. (Usted Aprenda más sobre los elementos de nivel de bloque en el capítulo de posicionamiento CSS más adelante en el curso.)

Pero dejaremos las imágenes allí. En la siguiente sección, echaremos un vistazo a los hipervínculos.

Imágenes de fondo | Hipervínculos

Recomendado para ti