Uso de las etiquetas HTML figure y figcaption para imágenes

Clase 15 de 56 • Curso Definitivo de HTML y CSS

Resumen

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>
          <img
            src="./pics/tinified/small.jpg"
            alt="Es una imagen de un perrito"
          />
          <figcaption>Es una imagen de un perrito</figcaption>  
</figure>

Juan Pablo Celiz

student•

Que buena etiqueta! Siempre usaba div 😂

DANIEL SUAREZ

student•

Que bueno que te des cuenta, creeme figure es muy buena y es excelente practica utilziarla.

Joel Dominguez Merino

student•

siempre se aprende algo nuevo :D

Jose Daniel Huerta Vazquez

student•

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.

Cristian Alexander Osorio Martínez

student•

Interesante! Gracias por el dato. Pensé que era de uso exclusivo para contenedor de imágenes.

Efrain Montealegre Raga

student•

Muchas gracias por tu aclaración.

DANIEL SUAREZ

student•

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. :)

Joel Dominguez Merino

student•

Desde hoy en adelante ocupare etiquetas semanticas!

DANIEL SUAREZ

student•

Genial, es la mejor opción para tener una buena maquetación web

Yeisson Stik Gutierrez Rivera

student•

La forma correcta de colocar una imagen es con la etiqueta figure

SINTAXIS:

<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

Joel Dominguez Merino

student•

Buen aporte :)

Lucia Aldana Castillo

student•

Excelente!! Gracias :)

Maria Alejandra Carrero

student•

De ahora en adelante utilizare figure como contenedor para mis imagenes :D

Juan Christopher

student•

X2 xD

Diaz Mauricio

student•

Amén

Jose Luis Grande Acevedo

student•

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>

Alexandra Tchernaia

student•

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 =)

Jose Gustavo Santos Corrales

student•

Excelente!

Kenyi Julberht Hancco Quispe

student•

Bien!

Sebastian Gonzalez

student•

<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

Zuleydy Isamar Dudamell Colmenarez

student•

Por fin lo logré

Adriana Urrego

Team Platzi•

**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.

Rony Porraz Vargas

student•

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>

Juan Camilo Arenas Florez

student•

Gracias Rony

Briam Alejandro Castellanos Huerfano

student•

Si quieren agregar un comentario de manera rápida, lo pueden hacer así:

seleccionan el texto que quieren poner como comentario 2.usan las teclas → shift + alt + a y todo listo

Anthony Ismael Manotoa Moreno

student•

También es posible poniendo el cursor sobre la línea que quieres comentar y presionar Ctrl + / :D

Ricardo Mazuera

student•

Si usan Mac es con CMD + Shift + 7

Juan Ponce

student•

no conocia la etiqueta figcaption , es muy util.

DANIEL SUAREZ

student•

Ahora ya tienes mas poderes en html para que seas un excelente desarrollador :)

Joel Dominguez Merino

student•

Tampoco la conocía, muy útil!

jhon velasque

student•

ALGUIEN SABE COMO ESCRIBIR COMENTARIOS EN HTML ?

Juan Carlos Pinzón

student•

Por supuesto:

<!--  Esto es un comentario -->

Francisco Michaus

student•

<!–– y el comentario se cierra con ––>

Francisco Javier Saavedra Alcala

student•

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

Andres Condezo Monge

student•

Buena página!

Gaudy Areli Cadenillas Saldaña

student•

Le cambié el orden y agregué las etiquetas <figure> y <figcaption> 😁

Leobardo Daniel Pineda Salgado

student•

Aqui se ve un ejem claro del uso de figure con una foto del buen Freddy y su figure caption debajo.

Edgar López Laynez

student•

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.