Uso de las etiquetas HTML figure y figcaption para imágenes
Contenido del curso
Juan Pablo Celiz
DANIEL SUAREZ
Joel Dominguez Merino
Jose Daniel Huerta Vazquez
Cristian Alexander Osorio Martínez
Efrain Montealegre Raga
DANIEL SUAREZ
Joel Dominguez Merino
DANIEL SUAREZ
Yeisson Stik Gutierrez Rivera
Joel Dominguez Merino
Lucia Aldana Castillo
Maria Alejandra Carrero
Juan Christopher
Diaz Mauricio
Jose Luis Grande Acevedo
Alexandra Tchernaia
Jose Gustavo Santos Corrales
Kenyi Julberht Hancco Quispe
Sebastian Gonzalez
Zuleydy Isamar Dudamell Colmenarez
Adriana Urrego
Team Platzi
Rony Porraz Vargas
Juan Camilo Arenas Florez
Briam Alejandro Castellanos Huerfano
Anthony Ismael Manotoa Moreno
Ricardo Mazuera
Juan Ponce
DANIEL SUAREZ
Joel Dominguez Merino
jhon velasque
Juan Carlos Pinzón
Francisco Michaus
Francisco Javier Saavedra Alcala
Andres Condezo Monge
Gaudy Areli Cadenillas Saldaña
Leobardo Daniel Pineda Salgado
Edgar López Laynez
Adrian Salgado
Iván Arcos
Joel Dominguez Merino
Ricardo Tornero
Joel Dominguez Merino
Que buena etiqueta! Siempre usaba div 😂
Que bueno que te des cuenta, creeme figure es muy buena y es excelente practica utilziarla.
siempre se aprende algo nuevo :D
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.
Interesante! Gracias por el dato. Pensé que era de uso exclusivo para contenedor de imágenes.
Muchas gracias por tu aclaración.
Como bien sabemos utilizar div ya es mala practica gracias a la semántica de html5 podemos utilizar figure para darle un contenedor a nuestra img. :)
Desde hoy en adelante ocupare etiquetas semanticas!
Genial, es la mejor opción para tener una buena maquetación web
La forma correcta de colocar una imagen es con la etiqueta figure
SINTAXIS:
<figcaption><figcaption/><figure> <img src="./pics/tinified/small.jpg" alt="Es una imagen de un perrito" /> <figcaption>Es una imagen de un perrito</figcaption> </figure>
Esta etiqueta nos ayuda a darle una descripcion a la imagen (autor, tipo, año, etc..) y sera visible en la parte de abajo de la imagen
Buen aporte :)
Excelente!! Gracias :)
De ahora en adelante utilizare figure como contenedor para mis imagenes :D
X2 xD
Amén
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> <img src="./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> <img src="./small.jpg" alt="Es una imagen de un perrito" /> <figcaption>Es una imagen de un perrito</figcaption> </figure>
Lista de super 1.5 =)
y su codigo!!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cosas Ricas</title> <link rel="stylesheet" href="estilos.css"> </head> <body class="body"> <header> <h1> Lista de super!</h1> </header> <section> <article> <ul> <li>Verduras</li> <ol> <li> <a href="#">Acelga</a> </li> <figure > <img src="./imagenes/acelga.jpg" width="250px" height="180px" alt="acelga"/> </figure> <li> <a href="#">Cebolla</a> </li> <figure > <img src="./imagenes/cebollas-2.jpg" width="250px" height="180px alt="Cebolla"/> </figure> <li> <a href="#">Morrones</a> </li> <figure > <img src="./imagenes/Morrones.jpg" width="250px" height="180px alt="Morrones"/> </figure> </ol> <li>Queseria</li> <ol> <li> <a href="#">jamon</a> </li> <figure > <img src="./imagenes/jamon.jpg"width="250px" height="180px alt="jamon"/> </figure> <li> <a href="#">muzzarella</a> </li> <figure > <img src="./imagenes/queso.jpeg" width="250px" height="180px alt="queso"/> </figure> <li> <a href="#">tapa de tarta</a> </li> <figure > <img src="./imagenes/pascualinas.webp"width="250px" height="180px alt="pascualinas"/> </figure> </ol> </ul> </article> </section> </body> </html>
y la tarta =)
Excelente!
Bien!
<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
Por fin lo logré
**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
<picture> <source type="image/webp" srcset="./images/header.webp"> <source type="image/jpeg" srcset="./images/header.png"> <img class="w-100" alt="Header " /> </picture>
Gracias Rony
Si quieren agregar un comentario de manera rápida, lo pueden hacer así:
También es posible poniendo el cursor sobre la línea que quieres comentar y presionar Ctrl + / :D
Si usan Mac es con CMD + Shift + 7
no conocia la etiqueta figcaption , es muy util.
Ahora ya tienes mas poderes en html para que seas un excelente desarrollador :)
Tampoco la conocía, muy útil!
ALGUIEN SABE COMO ESCRIBIR COMENTARIOS EN HTML ?
Por supuesto:
<!-- Esto es un comentario -->
<!–– y el comentario se cierra con ––>
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
Buena página!
Le cambié el orden y agregué las etiquetas <figure> y <figcaption> 😁
Aqui se ve un ejem claro del uso de figure con una foto del buen Freddy y su figure caption debajo.
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.
tienes razón, eso es genial aunque también esta este recurso para estar aun más actualizado con las etiquetas html 5. mas etiquetas html
Cada vez se ve mejor :)
Se ve excelente amigo :D
Información interesante que no venía en el curso anterior de html y css
Este curso esta increíble! totalmente cubierto todo :D
