Saltar al contenido

¿Cuál es el propósito de la etiqueta 'figura' en html?

Solución:

los <figure> El elemento está diseñado para usarse junto con el elemento para marcar diagramas, ilustraciones, fotos y ejemplos de código (entre otras cosas). La especificación dice esto sobre <figure>:

W3C

El elemento de figura representa una unidad de contenido, opcionalmente con una leyenda, que es autónoma, a la que normalmente se hace referencia como una sola unidad del flujo principal del documento, y que se puede mover fuera del flujo principal del documento sin afectando el significado del documento.

MDN

El HTML <figure> El elemento representa contenido autónomo, a menudo con una leyenda. <figcaption>, y normalmente se hace referencia a ella como una sola unidad. Si bien está relacionado con el flujo principal, su posición es independiente del flujo principal. 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 oa un apéndice sin afectar el flujo principal.

Buena pregunta.

Todo se reduce a algunas cosas: significado semántico, SEO, accesibilidad (y tal vez más ...)

¿Qué es?

los elemento es un etiqueta semántica que acaba de salir en HTML5. Esto le dice al navegador que es un contenedor que contiene elementos que tienen una relación entre sí. El juega un papel en esto y se explicará a continuación.

Además, tenga en cuenta que no tiene que contener solo un elemento, puede contener otros elementos como tablas, videoclips, clips de audio, etc.

¿Por qué deberíamos usarlo?

Antes de HTML5, no existía ningún elemento para los subtítulos de imágenes, diagramas, videos, etc. Tendrá un significado semántico ahora con elemento. los ayudará al motor de búsqueda a encontrar estas imágenes.

Y con semántica, tu SEO mejora y los bots encontrarán su imagen más rápido en el motor de búsqueda y la mostrarán en los resultados.

Accesibilidad

Con las etiquetas figure y figcaption, el usuario (usuario con discapacidad visual) podrá comprender la estructura (con la ayuda del lector de pantalla). El bot lector de pantalla informará al usuario que se trata de un contenido de subtítulos, por lo que si se coloca justo antes o después de las imágenes relacionadas, el usuario podrá entenderlo.

Respuesta inspirada en: https://forum.freecodecamp.org/t/why-use-the-figure-element/315116/3

La razón para usar una etiqueta es porque es semántica HTML5. No tiene asignados rasgos de clase. Como han señalado las otras respuestas, puede eliminarlo o reemplazarlo con un div y realmente no cambiará nada. Sin embargo, si está escribiendo un buen código 'semántico', que define el significado en sus etiquetas, esta es una de las etiquetas estándar que incluiría.
Es similar a otras etiquetas semánticas que definen su código de manera legible para el navegador y el desarrollador.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)


Tags : /

Utiliza Nuestro Buscador

Search
Generic filters

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *