<figure> en HTML5El elemento <figure> es uno de los nuevos elementos semánticos introducidos en HTML5. Está diseñado para contener contenido que se refiere tangencialmente al contenido principal del documento, como una ilustración, un diagrama, una foto, una lista de códigos, etc. Es especialmente útil para ayudar a organizar el contenido visual y hacerlo más accesible y mejor definido tanto para los navegadores como para las herramientas de accesibilidad.
El elemento <figure> comúnmente se utiliza junto con el elemento <figcaption> para proporcionar una leyenda o una descripción del contenido dentro de <figure>. Aunque <figcaption> es opcional, su uso mejora significativamente la comprensión del contenido visual.
<figure><figure> admite todos los atributos globales que son aplicables a la mayoría de los elementos HTML. Entre ellos:
accesskey: Especifica una tecla de acceso rápido para que el usuario pueda enfocar el elemento.class: Especifica una o más clases para el elemento (usado para aplicar estilos CSS).contenteditable: Indica si el contenido del elemento se puede editar.contextmenu: Asocia un menú contextual con el elemento.dir: Define la dirección del texto: ltr (de izquierda a derecha) o rtl (de derecha a izquierda).draggable: Especifica si un elemento es arrastrable.hidden: Indica que el elemento aún no, o ya no, es relevante.id: Define un identificador único para el elemento.lang: Establece el idioma del contenido del elemento.spellcheck: Indica si se debe verificar la ortografía dentro del elemento.style: Define reglas de estilo en línea específicas para el elemento.tabindex: Especifica el orden de tabulación del elemento.title: Proporciona información adicional sobre el elemento.translate: Indica si el contenido del elemento debe ser traducido o no.<figure> en HTML5 con ejemplosEl uso principal del elemento <figure> es proporcionar una estructura semántica clara para el contenido visual u otro tipo de representación que es necesaria para comprender el contenido del documento pero que también puede existir independientemente del flujo principal del texto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Uso de <figure></title>
</head>
<body>
<figure>
<img src="img/lake.jpg" alt="Imagen de un lago sereno">
<figcaption>Una hermosa vista del lago al atardecer.</figcaption>
</figure>
</body>
</html>En este ejemplo, la etiqueta <figure> contiene una imagen con la etiqueta <img> y una leyenda proporcionada por la etiqueta <figcaption>. Esto estructura semánticamente la imagen con su respectiva descripción.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Diagrama con <figure></title>
</head>
<body>
<figure>
<img src="img/diagrama-flujo.png" alt="Diagrama de flujo">
<figcaption>Estructura básica del diagrama de flujo de un proceso de negocio.</figcaption>
</figure>
</body>
</html>En este caso, un diagrama de flujo se incorpora con la etiqueta <img> dentro de la etiqueta <figure> y se proporciona una breve descripción del diagrama con <figcaption>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de Código en <figure></title>
</head>
<body>
<figure>
<pre>
<code>
function saludar() {
console.log('Hola, mundo!');
}
saludar();
</code>
</pre>
<figcaption>Función básica para saludar en JavaScript.</figcaption>
</figure>
</body>
</html>En este ejemplo, se incluye un bloque de código dentro de la etiqueta <figure>, utilizando <pre> y <code> para formatear el código adecuadamente. Además, se proporciona una breve descripción del código con la etiqueta <figcaption>.
Estos son ejemplos sencillos de cómo se puede utilizar <figure> en HTML5 para estructurar el contenido visual y proporcionar contextos semánticos claros tanto para los usuarios como para las herramientas de accesibilidad.