fbpx

HTML figure

La etiqueta HTML figure sirve para identificar contenidoque hace parte del flujo principal de un documento pero que se ha incorporado de manera independiente, por lo que puede ser removido sin que haya alteraciones. Generalmente, se usa para referenciar ilustraciones <img>, vídeos <video>, partes de código <code>, párrafos <p> etcétera.

Descripción

Dado que la etiqueta <figure> es un elemento autocontenido, el esbozo de su contenido es independiente del boceto del documento base. Así mismo, se puede mover de un lugar a otro dentro de la misma página o pasar a otra página sin que se altere el flujo.

La etiqueta <figure> puede tener asociado un título <figcaption> que tiene la posibilidad de llamar a la etiqueta <figure> desde cualquier parte del documento.

Puede haber uno o más elementos <figure> en una misma página y, a su vez, una etiqueta <figure> tiene la capacidad de incorporar dentro de sí otros elementos de su misma categoría (hijos). Lo que no es factible es que haya un elemento <figcaption> en medio de una etiqueta <figure>.

No es prudente que emplees la etiqueta <figure> cuando la posición del contenido a incorporar es relevante para el documento base.

Ejemplo de uso

En el siguiente ejemplo incorporamos los elementos <figure> <figcaption>, es decir una imagen posicionada a la derecha del texto con su título. En este caso, quisimos poner el título después de la ilustración.

<figure style=”float: right”>
  <img src = "img/flowers.png" alt = "imagen"/>
  <figcaption> Vegetación de la sabana </figcaption>
</figure>

<p> La sabana se desarrolla en terrenos planos que se inundan en época de lluvias y en sequía se agrietan.</p>

<p>Generalmente, se encuentran gramíneas, arbustos de 3 a 6 metros de altura, plátano, calabaza y demás plantas con flores sencillas como espigas.</p>

Atributos

El elemento <figure> no cuenta con atributos particulares, en este caso se usan los atributos globales o comunes a todos los elementos HTML.



Share This