Figure<figure><img /> </figure> es una etiqueta que permite almacenar una imagen en su interior. Es una mejor práctica comparada con usar solamente un contenedor div. Como complemento al contenedor figure, se utiliza la etiqueta figcaption<figcaption></figcaption>, que permite darle una pequeña descripción a la imagen, como el autor, fuente o algo por el estilo, que se mostrará usualmente abajo de la imagen.
Figcaption se diferencia del atributo Alt porque esta última muestra su descripción en texto en el navegador solamente al pasar el mouse por encima de la imagen (de ahí su utilidad para personas con discapacidad visual).
Es importante considerar que la etiqueta figure no es únicamente para imágenes: El elemento HTML <figure> representa contenido independiente, a menudo con un título. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.
Ejemplo de etiqueta Figure:
<figure><imgsrc="./pics/tinified/small.jpg"alt="Es una imagen de un perrito"
/><figcaption>Es una imagen de un perrito</figcaption></figure>
Aportes 0
Preguntas 91
Ordenar por:
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
Es importante considerar que la etiqueta FIGURE no es únicamente para imágenes: El elemento HTML <figure> representa contenido independiente, a menudo con un título. Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.
La etiqueta figure tiene una etiqueta adicional que nos ayuda a agregarle una pequeña descripción a la imagen cuando sale directamente ya en el proyecto.
Casi siempre te vas a encontrar en la necesidad de esta etiqueta de imagen meterla en otra etiqueta contenedora para poderla tratar ya sea para poder darle un tamaño especifico o poderla posicionar en la forma que tu estas esperando en el proyecto. Se mete en la etiqueta div. Semánticamente es incorrecto. Lo correcto es usar una etiqueta figure
<div><imgsrc="./small.jpg"alt="Es una imagen de un perrito" /></div>
En la etiqueta figcaption vamos a poner una descripción similar a lo que viene en el alt pero que visualmente pueda ayudar a dar una explicación de que es la imagen que estamos viendo en caso de que se necesite
<figure><imgsrc="./small.jpg"alt="Es una imagen de un perrito" /><figcaption>Es una imagen de un perrito</figcaption></figure>
<figure><img /> </figure> Es una etiqueta que permite almacenar la imagen en vez de usar un div <figcaption></figcaption> Permite darle una pequeña descripción a la imagen como el autor, una fuente o algo por el estilo
**img **es la etiqueta que se usa para llamar una imagen, allí se especifica la ubicación de la imagen en una carpeta o en una url a través de atributo src, de igual forma se tiene el atributo alt que se usa como una descripción alternativa que se muestra cuando por alguna razón no es posible mostrar la imagen, esto le ayuda al usuario a saber qué imagen va en ese espacio.
La etiqueta img va contenida en la etiqueta figure ,la cual reemplaza la etiqueta div y nos permite darle estilos a la imagen.
Finalmente tenemos la etiqueta **figcaption ** que nos ayuda a crear una descripción al pie de la foto.
La etiqueta picture y el source tambien nos ayuda a renderizar imagenes por ejemplo en el siguiente codigo yo renderizo una imagen .webp en caso de que un navegador no soporte el formato renderiza la siguiente imagen que seria png
Con fines practicos si no quieren descargar imagenes pueden usar el link de Lorem el cual te da una imagen a la medida que quieras sólo usando el link siguiente : https://picsum.photos/200/300
Yo sabia de varias etiquetas de html que me enseñaron en la universidad (no hace mucho) pero ahora me doy cuenta que varias de estas ya no se usan en HTML 5, ahora que las queria usar ya no podian ser interpretados. Los cursos de Platzi sí que estan actualizados y nos ponen a la banguardia de la tecnologia. Saludos y animos en el aprendizaje.
Me parece importante recordar que existe una etiqueta llamada picture y es muy util para los tiempos de carga de imagenes, me explico si tengo una imagen 1920x1080 para desktop, seria perfecto , pero para mobile esas dimenciones son muy grandes , entonces deberia tener una imagen de 320px en adelante para mejorar los tiempos de carga y la experiencia de carga dejo la documentación aquí. https://www.w3schools.com/tags/tag_picture.asp
Una clase completa solo para esto de la etiqueta figure me parecio algo muy importante, creo que la gran mayoria utilizabamos div y no figure por los margenes 😂😂😂.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>List Market</title></head><body><header><figure><imgsrc="./imgs/online-shopping.svg"alt="Logo de lista"width="30"height="30"></figure><p>Desafio</p><nav></nav></header><main><section><article></article></section><h1>Lista de mercado</h1><ul><li>Frutas</li><ol><li><ahref="https://okdiario.com/recetas/receta-helado-platano-casero-4177093"target="blank">Platano 🍌</a></li><li><ahref="https://peru.com/estilo-de-vida/gastronomia/aprende-preparar-jugo-papaya-casero-estos-4-sencillos-pasos-noticia-613735"target="blank">Papaya</a></li><li>Fresa</li></ol><figure><imgsrc="./imgs/29854.jpg"alt="Frutas"height="80"width="200"></figure><li>Verduras</li><ol><li>Zanahoria</li><li><ahref="https://crujienteyaldente.com/recetas/verduras/como-hacer-acelgas-salteadas-con-ajo"target="blank">Acelga</a></li><li><ahref="https://www.cuerpomente.com/blogs/gastronomia-consciente/como-cocinar-alcachofas_947"target="blank">Alcachofa</a></li></ol><figure><imgsrc="https://as2.ftcdn.net/jpg/03/20/39/89/500_F_320398931_CO8r6ymeSFqeoY1cE6P8dbSGRYiAYj4a.jpg"alt="Verduras"height="80"width="200"></figure><li>Granos</li><ol><li>Soya</li><li><ahref="https://www.recetasdeescandalo.com/como-cocinar-quinoa-perfectamente-y-recetas-para-utilizarla/"target="blank">Quinoa</a></li><li><ahref="https://perudelicias.com/quinua-y-kiwicha-para-un-desayuno1-de-campeones/"target="blank">kwicha</a></li></ol><figure><imgsrc="https://as1.ftcdn.net/jpg/02/77/41/54/500_F_277415431_7GdSauJetoe3Rgsla7c5714bGoiUJEkG.jpg"alt="granos y semillas"height="80"width="200"></figure></ul></main><footer><p>Hecho con 💚</p></footer></body></html>
a pesar de tener mas de 6 o 7 meses aprendiendo HTML y CSS decidí empezar desde 0 para volver a aprender y refrescar la mente, hoy veo que no debo usar img dentro de div sino dentro de figure, una razón mas para seguir aprendiendo
Siempre es recomendable utilizar etiquetas semánticas apropiadas en HTML para mejorar la estructura y la legibilidad del código.
La etiqueta en HTML se utiliza para representar contenido independiente e incrustado en un documento, como imágenes, gráficos, diagramas, videos, entre otros. Es importante utilizar la etiqueta <figcaption> para proporcionar información adicional sobre el contenido de la figura, lo que ayuda a mejorar la accesibilidad y la comprensión del contenido visual.
Tenia literalmente el ejemplo de lo que se puede mejorar, probare ahora con el figure, que bueno haberlo conocido.
Pd: esos @ es porque uso Blazor, un framework para usar codigo C# junto con el html
<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"/><metaname="description"content="esta es la primera pagina de platzi "/><metaname="robots"content="index,follow"/><title>Mi pagina con imagenes!</title><metaname="viewport"content="width=device-width, initial-scale=1.0"/><linkrel="stylesheet"href="./CSS/style.css"><style>.img{
background:url(IMG/fondo_pagina.jpeg);
background-size:100%;
}
.color{
color: #fff;
}
</style></head><bodyclass="img"><h1class="color">Este es el primer reto</h1><h3class="color">Lista de canasta familiar!</h3><ulclass="color"><li>Frutas</li><ol><li><ahref="https://www.cocina-ecuatoriana.com/recetas/bebidas/jugo-de-tomate-de-arbol"target="blank">
Tomate de Arbol
</a></li><li><ahref="https://encolombia.com/vida-estilo/alimentacion/recetas/recetas-de-batidos/batido-de-uva-tomate-y-limon/"target="blank">
Uva
</a></li><li><ahref="https://www.youtube.com/watch?v=5mYhgSAuz2A"target="blank">
Manzana
</a></li></ol></ul><ulclass="color"><li>Verduras</li><ol><li><ahref="https://www.directoalpaladar.com/recetas-de-legumbres-y-verduras/16-recetas-para-aprovechar-tomates-temporada-cuando-no-estan-guapos"target="blank">
Tomates
</a></li><li><ahref="https://www.pequerecetas.com/receta/berenjenas-6-recetas/"target="blank">
Berenjena</a></li><li><ahref="https://www.animalgourmet.com/2017/08/01/9-recetas-pimientos/"target="blank">
Pimenton
</a></li></ol></ul><ulclass="color"><li>Carnes</li><ol><li><ahref="https://www.cocinacaserayfacil.net/recetas-con-pollo/"target="blank">
Pollo
</a></li><li><ahref="https://www.cocinafacil.com.mx/recetas/recetas-con-carne-de-cerdo/"target="blank">Cerdo</a></li><li><ahref="https://www.youtube.com/watch?v=yWI8Vx6ppDA"target="blank">
Higado
</a></li></ol></ul><main><sectionclass="color"><figure><imgsrc="./IMG/verduras.jpg"alt="Verduras"style="width: 70px;"><figcaption>Estas son las verduras que debes comprar:</figcaption></figure></section></main></body></html>
El elemento HTML <figure> representa contenido independiente, a menudo con un título. Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.
Aqui les muestro como agregue los figcaption a cada imagen ❤
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="robots"content="index,follow"><metaname="description"content="Esta pagina te mostrara fotos de gatitos"><title>Receta</title><metaname="viewport"content="width=device-width, inictial-scale=1.0"><linkrel="stylesheet"href="css/style.css"></head><body><header><p>desafio</p></header><main><h1>Soy la lista del super!</h1><ul><li>Frutas</li><ol><li><ahref="">Manzana</a><figure><imgsrc="./imagenes/4.jpg"alt="Manzana"><figcaption>Esta es una manzana</figcaption></figure></li><li><ahref="">Platano</a><figure><imgsrc="./imagenes/3.jpg"alt="Platano"><figcaption>Este es un banano+</figcaption></figure></li></ol></ul><ul><li>Carnes</li><ol><li><ahref="">Pollo</a><figure><imgsrc="./imagenes/2.jpg"alt="Pollo"><figcaption>Esta es una pechuga de pollo</figcaption></figure></li><li><ahref="">Carne Molida</a><figure><imgsrc="./imagenes/1.jpg"alt="Carne Molida"><figcaption>Esta es un libra de carne molida</figcaption></figure></li></ol></ul><ul><li>Verduras</li><ol><li><ahref="">Limon</a><figure><imgsrc="./imagenes/6.jpg"alt="Limon"><figcaption>Esta es una lima limon</figcaption></figure></li><li><ahref="">Zanahoria</a><FIgure><imgsrc="./imagenes/5.jpg"alt="Zanahoria"><figcaption>Estas son unas baby zanahorias</figcaption></FIgure></li></ol></ul><footer><p>Creado con amor ❤</p></footer></main></body></html>
En específico el nombre de la etiqueta es img, su atributo src debe hacer referencia a la ruta donde se encuentra la imagen en cuestión, y alt hace referencia al texto que se deberá desplegar si la imagen no se puede cargar, es decir, es un texto alternativo a la imagen que haga entender lo que debería estar ahí.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Clase IMG</title></head><body><main><section><h1>This is test</h1><p>"Random foto of futuristic arquitecture. Small image"</p><imgsrc="./REDUCIDAS/small.jpg"alt="Small image of random architecture."><h1>This is test</h1><p>"Random foto of futuristic arquitecture. Medium image"</p><imgsrc="./REDUCIDAS/medium.jpg"alt="Medium image of random architecture."><h1>This is test</h1><p>"Random foto of futuristic arquitecture. Large image"</p><imgsrc="./REDUCIDAS/large.jpg"alt="Large image of random architecture."></section></main></body></html>
En muchos proyectos vamos a ver que las imágenes están contenidas en etiquetas <div>, pero esto no es semánticamente correcto. La etiqueta <figure> es la ideal.
figure nos trae una etiqueta muy útil para colocar una descripción visible a las imágenes. <figcaption>
En <figcaption> colocamos una descripción similar a la que va en alt.
De otra manera tendríamos que colocar una etiqueta div con un párrafo para hacerlo, pero esta etiqueta nos facilita aquello.
Yo fuí un poco mas allá con la etiqueta figure con el reto anterior (lista de alimentos).
Les dejo el enlace al código y tambien al sitio en pages de GitHub donde se ve en vivo el código renderizado. En repositorio del código dejé una explicación del reto y lo que yo realicé, pueden leerlo desde aquí.
<figure> es una etiqueta contenedora en la cual va la etiqueta <img>, pueden ser una o varias imagenes y semánticamente es lo correcto para el navegador.
<figure>
<img src=“./pics/shalala/small.jpg”
alt=“Es una imagen de perrito”
/>
</figure>
La etiqueta <figcaption> </figcaption> nos ayudar a dar una explicación visual de la imagen, por ejemplo que abajo de la imagen de un perrito diga “Es una imagen de perrito” puede ser una descripción, el nombre del autor de la imagen o algo referente a la imagen.
Queda de la siguiente forma:
<figure>
<img src=“./pics/shalala/small.jpg”
alt=“Es una imagen de perrito”
/>
<figcaption>Es una imagen de un perrito</figcaption>
</figure>
Me encantó esta clase porque aprendí algo muy muy importante que no sabia: La forma correcta de colocar una imagen es con la etiqueta <figure>, y no con <div>. ¡Genial!
Siempre pense que estaba haciendo una buena practica con los div pero con estas clases me he dado cuenta lo errado que estoy y es que tiene logica para tener un mejor orden de que hace que
En resumidas cuentas lo que entiendo es que tener una buena semántica a la hora de codear html es imprescindible para que el navegador sepa que es cada cosa, y pueda posicionar correctamente nuestra website, entre otras cosas. Y la etiqueta <div> la podríamos utilizar correctamente en caso de que nos encontremos con algo en el código que se quiera etiquetar pero que hasta los momentos no exista una etiqueta especial para ello, de resto utilizar las etiquetas contenedoras correspondientes.
contiene un reemplazo textual para la imagen, lo cual es obligatorio e increíblemente útil para la accesibilidad: los lectores de pantalla leen el valor del atributo a sus usuarios para que sepan qué significa la imagen.
El texto alternativo también se muestra en la página si la imagen no se puede cargar por alguna razón, como errores de red, bloqueo de contenido o enlaces rotos.
```python
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagenes</title>
</head>
<body>
<main>
<section>
<figcaption>Es la imagen de un viajero de espaldas, que se encuentra frente a un lago con montañas
</figcaption>
</section>
</main>
</body>
</html>
```\\<html lang="en">
\<head> \<meta charset="UTF-8"> \<meta name="viewport" content="width=device-width, initial-scale=1.0"> \<title>Imagenes\</title>\</head>
\<body> \<main> \<section> \ \ \<figcaption>Es la imagen de un viajero de espaldas, que se encuentra frente a un lago con montañas \</figcaption> \ \</section> \</main>\</body>
\</html>
La etiqueta <figure> en HTML se utiliza para encapsular cualquier contenido que se refiera a una figura, como imágenes, gráficos, diagramas, fotos, ilustraciones, fragmentos de código, etc. La etiqueta <figure> se usa junto con la etiqueta <figcaption> para proporcionar una descripción o leyenda para la figura. Esto es especialmente útil cuando se necesita describir la figura de manera contextual en relación con el contenido circundante.
Aquí tienes un ejemplo de cómo usar la etiqueta <figure> y <figcaption>:
<figure>
<img src=“imagen.jpg” alt=“Descripción de la imagen”>
<figcaption>Esta es una descripción de la imagen.</figcaption>
</figure>
<figure>: Este es un elemento de HTML que se utiliza para encapsular cualquier contenido que se referencie desde el documento principal, como imágenes, gráficos, diagramas, código, etc. A menudo se utiliza junto con el elemento <figcaption> para proporcionar una leyenda o descripción del contenido encapsulado.
Ejemplo:
html
<figure><imgsrc="imagen.jpg"alt="Descripción de la imagen"><figcaption>Una hermosa imagen</figcaption></figure>
En este ejemplo, <figure> envuelve la imagen y <figcaption> proporciona una descripción para la imagen.
<picture>: Este elemento se utiliza para incluir varias fuentes o versiones de una imagen y permite al navegador seleccionar la mejor opción según las características del dispositivo y las preferencias del usuario. Es especialmente útil para la implementación de imágenes responsivas.
Ejemplo:
html
<picture><sourcesrcset="imagen-grande.jpg"media="(min-width: 800px)"><imgsrc="imagen-pequeña.jpg"alt="Descripción de la imagen"></picture>
En este ejemplo, se proporciona una versión grande de la imagen para pantallas anchas y una versión más pequeña para pantallas más pequeñas o dispositivos móviles.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?