Cual es la diferencia entre las etiquetas “<strong>figure</strong>” y “<strong>picture</strong>”? Por que a veces recomienda usar para lo...

Con la etiqueta

Gracias por tu aclaratoria ;) @andresfelipelg

Definición y uso La <figure>etiqueta especifica contenido autónomo, como ilustraciones, diagramas, fotos, listas de códigos, etc.

Si bien el contenido del <figure>elemento está relacionado con el flujo principal, su posición es independiente del flujo principal y, si se elimina, no debería afectar el flujo del documento.

La <picture>etiqueta ofrece a los desarrolladores web más flexibilidad para especificar recursos de imágenes.

El uso más común del <picture>elemento será para la dirección de arte en diseños receptivos. En lugar de tener una imagen que se escala hacia arriba o hacia abajo según el ancho de la ventana gráfica, se pueden diseñar varias imágenes para llenar mejor la ventana del navegador.

El <picture>elemento contiene dos etiquetas: una o más etiquetas <source> y una etiqueta <img> .

El navegador buscará el primer elemento <source> donde la consulta de medios coincida con el ancho de la ventana actual, y luego mostrará la imagen adecuada (especificada en el atributo srcset). El elemento <img> es necesario como último <picture>elemento secundario del elemento, como opción alternativa si ninguna de las etiquetas de origen coincide.

Sugerencia: El <picture>elemento funciona de manera "similar" a <video> y <audio>. Configura diferentes fuentes y la primera fuente que se ajusta a las preferencias es la que se está utilizando.

La etiqueta <figure> permite agregar contenido variado asociadas a una descripción o título, el cual es asociado semánticamente a este, de tal forma que podemos agregar una imagen, ilustración, diagrama, o incluso código. Como regla general, el contenido que agreguemos debe de estar relacionado al texto principal de la página.

Un claro ejemplo donde se puede emplear <figure> es para agregar imágenes a un artículo, donde las imágenes tienen por lo general una descripción justo por debajo. Un claro ejemplo sería cualquier artículo de Wikipedia, ya que este inserta a lo largo de todas sus secciones imágenes que tiene que ver con el texto en cuestión.

Actualmente <figure> es más utilizado para representar imágenes, porque es lo más común en una página además del texto, pero es importante resaltar que se puede utilizar para representar cualquier contenido. La clave de <figure> es que nos permite asociar cualquier cosa con una descripción, de tal forma que son asociados semánticamente.

La etiqueta <figure> se utiliza en conjunto con la <figcaption> para representar la descripción del contenido. La etiqueta <figure> puede tener cualquier contenido seguido de <figcaption> o al revés, <figcaption> seguido de cualquier contenido.

La etiqueta <figure> permite agregar contenido variado asociadas a una descripción o título, el cual es asociado semánticamente a este, de tal forma que podemos agregar una imagen, ilustración, diagrama, o incluso código. Como regla general, el contenido que agreguemos debe de estar relacionado al texto principal de la página.

Un claro ejemplo donde se puede emplear <figure> es para agregar imágenes a un artículo, donde las imágenes tienen por lo general una descripción justo por debajo. Un claro ejemplo sería cualquier artículo de Wikipedia, ya que este inserta a lo largo de todas sus secciones imágenes que tiene que ver con el texto en cuestión.

Actualmente <figure> es más utilizado para representar imágenes, porque es lo más común en una página además del texto, pero es importante resaltar que se puede utilizar para representar cualquier contenido. La clave de <figure> es que nos permite asociar cualquier cosa con una descripción, de tal forma que son asociados semánticamente.

La etiqueta <figure> se utiliza en conjunto con la <figcaption> para representar la descripción del contenido. La etiqueta <figure> puede tener cualquier contenido seguido de <figcaption> o al revés, <figcaption> seguido de cualquier contenido.

https://www.w3schools.com/tags/tag_figure.asp https://www.oscarblancarteblog.com/2016/11/28/etiqueta-figure-html5/