5 min de lectura

HTML5 Etiqueta figure

La etiqueta figure es un elemento de HTML5, cuyo contenido es independiente, pero tiene relación con el flujo del documento.

Su principal función es especificar imágenes, diagramas o fragmentos de código que nos ayuden a complementar la información que se quiere brindar en la página.

El contenido de dicha etiqueta pude ir acompañado de una descripción o título que tenga relación con la información que se contiene en este elemento, lo cual podemos especificar con la ayuda de la etiqueta <figcaption>.

¿Cómo se usa la etiqueta figure?

<figure> tiene la siguiente sintaxis:

Ejemplos de la etiqueta figure

En el siguiente ejemplo usamos la etiqueta <figure> para especificar una imagen:

El ejemplo anterior está conformado por los siguientes elementos:

  • <!DOCTYPE html>: con esta instrucción le decimos al navegador que versión de html es la que estamos utilizando para que pueda procesar correctamente el documento.
  • <html>: que nos ayuda a delimitar y englobar lo que será el contenido de nuestra página, y para este ejemplo en particular le especificamos que el lenguaje empleado dentro del mismo seria en español, esto con la ayuda del atributo lang.
  • <head>: etiqueta en donde definimos información de nuestro documento, en este ejemplo, con la ayuda de la etiqueta <meta> y el atributo charset le especificamos el tipo de codificación que tendrá nuestra página, y también con la etiqueta <title> definimos el título de la misma.
  • <body>: etiqueta que contiene todo el contenido de nuestra página.
  • <section> : Dentro del body, definimos esta etiqueta para  representar una sección de nuestro documento, la cual está conformada por un <h1>  en donde definimos el encabezado de la página, así mismo, dentro de <section> tenemos dos elementos <p> para representar nuestros párrafos.
  • <figure> : También tenemos definida la etiqueta que es objeto de investigación en este artículo, donde se tiene contenida una imagen con el uso de la etiqueta <img> dentro de la cual le especificamos su ruta de ubicación y un texto alternativo es caso de que por algún motivo esta no pueda ser visualizada, así como su respectivo título, haciendo uso d la etiqueta <figcaption>.

Visualización del ejemplo anterior

Ejemplo etiqueta figure

Ahora, es este ejemplo, se usará <figure> con el propósito de especificar un fragmento de código:

Para este ejemplo, en el contenido de la etiqueta de figure, tenemos la etiqueta <pre>, la cual nos ayuda a definir texto preformateado, dentro de la cual declaramos el fragmento requerido de código usando la etiqueta <code>, con la cual indicamos que el texto indicado dentro de dicha etiqueta es un fragmento de código, así mismo, especificamos una pequeña descripción de dicho código usando la etiqueta <figcaption>.

Visualización del ejemplo anterior

Figure example

El uso de esta etiqueta es compatible con los siguientes navegadores:

Navegador chrome   Explorer    Navegador Firefox    Navegador Safari    Navegador Opera

¿Cuándo se usa la etiqueta figure?

La etiqueta figure se usa cuando queremos obtener un mejor posicionamiento en los buscadores, esto debido a que a nivel semántico el contenido que se encuentra dentro de dicha etiqueta está asociado con ella y los navegadores sabrán perfectamente que lo que se encuentra dentro de figure no parte del contenido principal de la página.

Para ver mas información y ejemplos relacionados con la etiqueta figure, da un vistazo a la documentación que MDN y W3C ponen a nuestra disposición.

Compartir
Estudiante de la carrera de Ingeniería en Informática en el Centro Universitario de Ciencias Exactas e Ingenierías, actualmente estoy cursando el quinto semestre.

Deja tus comentarios

This site uses Akismet to reduce spam. Learn how your comment data is processed.