HTML Agregar subtítulos a las imágenes
-
Uso de las etiquetas
<figcaption>y<figure> - Agregar leyendas en la parte superior de una imagen
-
Agregue leyendas a varias imágenes usando las etiquetas
<figure>y<figcaption> -
Agregue subtítulos a múltiples imágenes usando la etiqueta
<div> - Conclusión
Este artículo analiza los diferentes enfoques para escribir un título debajo o encima de una imagen o imágenes en una página web utilizando propiedades HTML y CSS.
Uso de las etiquetas <figcaption> y <figure>
HTML tiene una etiqueta específica que se usa para insertar un título en una imagen. El <figcaption> representa un título para un elemento <figure>, que se puede colocar como el primer o último hijo del elemento <figure> en HTML.
<figure> y <figcaption> son dos nuevos elementos introducidos como etiquetas en HTML5. Aquí, la etiqueta <figure> se usa mejor para mostrar imágenes y gráficos, mientras que <figcaption> les dice a los espectadores lo que están mirando.
La etiqueta <figcaption> también es compatible con los atributos globales y los atributos de eventos de HTML.
En el siguiente ejemplo, estamos usando un elemento <figure> para marcar una imagen en una página web o un documento y un elemento <figcaption> para definir un título para la imagen:
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
Aquí podemos ajustar la resolución de la imagen (alto y ancho) usando el atributo estilo de la etiqueta <img> en HTML.
Aquí, la resolución de la imagen se establece en su tamaño original.
Debido a que <figure> y <figcaption> son nuevas etiquetas HTML5, los navegadores de versiones anteriores no pueden entender el proceso de estas dos etiquetas. Por lo tanto, estas etiquetas se representan en la página web como etiquetas en línea, lo que significa que esas etiquetas no obtendrán un salto de línea automático para las leyendas de las figuras, donde simplemente se colocarán una al lado de la otra con las imágenes.
Entonces, como solución, podemos usar las propiedades CSS para diseñar <figure> y <figcaption> como en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
<figcaption>DelftStack Logo</figcaption>
</figure>
</body>
</html>
Aquí, podemos editar las etiquetas <figcaption> y <figure> según sea necesario usando diferentes propiedades de CSS y valores.
Agregar leyendas en la parte superior de una imagen
Sin ninguna guía CSS que indique lo contrario, el título aparecerá en la parte superior o inferior de la figura dependiendo de si el elemento <figcaption> es el primer o último elemento dentro de la figura.
En este ejemplo, estableceremos el título de la imagen en la parte superior de la misma de la siguiente manera:
<!DOCTYPE html>
<html>
<head>
<style>
figure {
border: 5px #4257f5 solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color:grey;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
</head>
<body>
<figure>
<figcaption>Fig.2 - DelftStack Logo</figcaption>
<img src="/img/DelftStack/logo.png" alt="logo" style="width:100%">
</figure>
</body>
</html>
Agregue leyendas a varias imágenes usando las etiquetas <figure> y <figcaption>
Podemos agregar subtítulos a varias imágenes con la ayuda de <figcaption>:
<!DOCTYPE html>
<html>
<body>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>DelftStack Logo</figcaption>
</figure>
<figure>
<img src="/img/DelftStack/logo.png" alt="logo">
<figcaption>Fig.2 - DelftStack Logo</figcaption>
</figure>
</body>
</html>
Podemos usar las propiedades CSS para formatear los títulos de las imágenes agregando diferentes estilos o colores al texto.
Agregue subtítulos a múltiples imágenes usando la etiqueta <div>
Con la ayuda de la etiqueta <div> y las propiedades CSS, podemos agregar leyendas a varias imágenes al mismo tiempo. En el siguiente ejemplo, agregaremos subtítulos a dos imágenes y, opcionalmente, podemos agregar un enlace que dirija a otra página web o sitio web una vez que se haga clic en la imagen.
<!DOCTYPE html>
<html>
<head>
<style>
#pictures{
text-align:center;
margin:50px auto;
}
#pictures a{
margin:0px 50px;
display:inline-block;
text-decoration:none;
color:black;
}
</style>
</head>
<body>
<div id="pictures">
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 1 - DelftStack Logo</div>
</a>
<a href="">
<img src="/img/DelftStack/logo.png" width="480px" height="90px">
<div class="caption">Fig 2 - DelftStack Logo</div>
</a>
</div>
</body>
</html>
Al usar este método, podemos agregar el título de las imágenes en la parte superior con implementaciones adicionales.
Conclusión
Se pueden usar diferentes enfoques para subtitular una imagen o imágenes usando HTML junto con propiedades CSS, como se mencionó anteriormente. Aún así, algunos métodos, como agregar una imagen o imágenes y sus leyendas en un formato de tabla, actualmente no son apropiados.
Nuevas etiquetas como <figure> y <figcaption> en HTML5 han facilitado la tarea de subtitular una imagen.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.