Diferencia entre las etiquetas <figure> y <img> en HTML

En este artículo, aprenderemos sobre las etiquetas <figure> & <img> junto con su implementación. También aprenderemos las diferencias entre ellos. Comencemos la discusión con la etiqueta de la figura en HTML.

Etiqueta HTML <figure> : la etiqueta <figure> en HTML5 se usa para agregar contenido independiente como ilustraciones, diagramas, fotos o listas de códigos en un documento. Está relacionado con el flujo principal, pero se puede usar en cualquier posición de un documento y la figura va con el flujo del documento y, si se elimina, no debería afectar el flujo del documento. En palabras simples, la etiqueta de figura se utiliza para organizar semánticamente el contenido de imágenes, videos, audios o incluso gráficos o tablas, bloque de códigos en el documento HTML.

Sintaxis:

<figure>
    <img src="url">
    <figcaption>content</figcaption>
</figure>

Atributos: contiene principalmente dos etiquetas que se detallan a continuación:

img src : esta etiqueta se usa para agregar una fuente de imagen en el documento.
figcaption : esta etiqueta se utiliza para establecer el título de la imagen. Es opcional de usar.

Ejemplo: Este ejemplo ilustra el uso de la etiqueta <figure> junto con los atributos src, width, height y alt.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      figure {
        border: 2px solid black;
        padding: 5px;
      }
    </style>
  </head>
   
  <body>
    <figure>
      <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210827151326/gfg-200x200.png"
        alt="image"
        width="200px"
        height="200px"/>
      <figcaption>Geeks For Geeks</figcaption>
    </figure>
  </body>
</html>

Salida: en este caso, la etiqueta <figure> ha realizado todos los cambios, ya que la imagen con el título está correctamente alineada con un espacio fuera del margen. La imagen y el título son parte uno del otro. El borde se agrega tanto a la etiqueta <figure> como a la etiqueta <figcaption>, ambas han ocupado el borde. La etiqueta <figure> es un elemento en línea.

etiqueta <figura>

Etiqueta HTML <img>: la etiqueta HTML <img> se usa para agregar una imagen o para establecer el fondo en la página web/sitio web. Hoy en día, el sitio web no agrega imágenes directamente a una página web, ya que las imágenes están vinculadas a páginas web mediante el uso de la etiqueta <img> que contiene espacio para la imagen.

Sintaxis:

<img src="url" alt="some_text">

Atributo: Contiene los siguientes valores de atributos:

src: se utiliza para especificar la ruta URL de la imagen de origen.
alt: se utiliza para especificar un texto alternativo para la imagen si, por alguna razón, la imagen no se puede mostrar.

Ejemplo: En este ejemplo, estamos usando la etiqueta <img> junto con los atributos src, ancho, alto y alt.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        border: 2px solid black;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210827151326/gfg-200x200.png"
      alt="image"
      width="200px"
      height="200px"/>
     
<p>Geeks For Geeks</p>
 
 
  </body>
</html>

Salida: en el caso de la etiqueta <img>, no está correctamente alineada y está muy cerca del margen, y el título está alejado de la imagen. La imagen y el título no son parte uno del otro. El borde no forma parte tanto de la imagen como del título. La etiqueta <img> es un elemento en línea, pero cuando especificamos ancho y alto, se convierte en un elemento de bloque.

etiqueta <img>

Diferencia entre las etiquetas <figure> y <img>:

S. No.	Etiqueta <figura>	Etiqueta <img>
1.	La etiqueta de figura se utiliza para organizar semánticamente el contenido de imágenes, videos, audios o incluso gráficos o tablas, bloque de códigos en el documento HTML.	La etiqueta de imagen se utiliza para agregar una imagen a una página HTML. La etiqueta <img> solo puede insertar una imagen.
2.	La etiqueta <figure> es una etiqueta de contenedor.	La etiqueta <img> es una etiqueta vacía.
3.	Esta etiqueta proporciona un contenedor de contenido que es equivalente a una figura o diagrama en un libro.	La etiqueta HTML <img> se utiliza para incrustar imágenes en un documento HTML.
4.	Esta etiqueta es un elemento en línea.	Es un elemento en línea, pero cuando especificamos ancho y alto, se convierte en un elemento de bloque.
5.	Puede usar el elemento figure junto con el elemento figcaption para proporcionar un título para el contenido de su elemento figure.	En la etiqueta de imagen no hay una etiqueta especial para el título, sino que podemos usar la etiqueta <p> o la etiqueta <span> para agregar pseudotítulos.
6.	Facilita que la máquina entienda el código. Fácil de conseguir en los motores de búsqueda.	Es difícil de entender para las máquinas.
7.	El elemento <figure> en sí mismo puede contener muchos otros elementos secundarios, ya sea un bloque de código, imágenes, audios, videos, etc.	La etiqueta <img> no puede tener varios elementos en su interior, solo se pueden agregar imágenes en la etiqueta <img>.
8.	La etiqueta de figura contiene alineación y estilo predeterminados.	La etiqueta de la imagen no contiene ninguna alineación ni estilo predeterminados.

Publicación traducida automáticamente

Artículo escrito por nitupandel001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

S. No.

Etiqueta <figura>

Etiqueta <img>

Deja una respuesta Cancelar la respuesta