Elemento figure en HTML

Un elemento html figure es contenido independiente por derecho propio, y generalmente se usa junto con un signo (a través de la etiqueta <figcaption>), y generalmente se refiere a una unidad indivisible de información.

Etiqueta html figure

Clasificaciones de contenido	Elemento organizativo.
Contenido permitido	Contenido reglamentario seguido de elemento `<figcaption>`, elemento `<figcaption>` seguido de contenido reglamentario o simplemente contenido reglamentario.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte contenido normativo.
Interfaz DOMO	HTMLElement

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
8	4.0	Soportado	5.1	11.10

Características

En este elemento se pueden utilizar propiedades globales.

Descripción de Uso

Un elemento <figure> suele representar una imagen, gráfico, diagrama, código fuente, etc. Referido dentro del contenido principal de la página, pero el elemento se puede mover a otra parte del documento oa una extensión sin que el contenido principal se vea afectado.
El elemento no aparece <figure> en el diseño general del documento.
La bandera se agrega al elemento <figure> creando el elemento <figcaption> dentro de él, y es su primer o último hijo.

Ejemplos de uso del html figure

Ver Imagen

Este ejemplo usa el elemento <figure>dos veces, la primera vez muestra un logotipo y la segunda vez muestra un logotipo con un banner de texto:

<! - Solo logotipo -> 
< figure > 
  < img  src = "logo-bigcode.jpg"  alt = "Logo de BigCode" > 
</ figure > 
< p > </ p > 
<! - Logotipo con banner de texto -> 
< figure > 
  < img  src = "logo-bigcode.jpg"  alt = "Logotipo de BigCode" > 
  < figcaption > Esta icon es el logo de BigCode </ figcaption > 
</ figure >

Mostrar Código

Para este ejemplo, el elemento <figure> (con un banner a través del elemento <figcaption>) se utilizará para mostrar el código:

< figure > 
  < figcaption > obtener información del navegador </ figcaption > 
  < pre >
    function NavigatorExample () {
      var txt;
      txt = "Browser CodeName:" + navigator.appCodeName;
      txt + = "Nombre del navegador:" + navigator.appName;
      txt + = "Versión del navegador:" + navigator.appVersion;
      txt + = "Cookies habilitadas:" + navigator.cookieEnabled;
      txt + = "Plataforma:" + navigator.platform;
      txt + = "Encabezado de agente de usuario:" + navigator.userAgent;
    }            
  </ pre > 
</ figure >

Ver Cita

Este ejemplo usa el elemento <figure> para mostrar una cita, con el elemento <cite> para indicar la fuente del nombre de la cita dentro del elemento <figcaption>:

< figure > 
  < figcaption > < cite > Informática </ cite > </ figcaption > 
  < q > Si el refinamiento es el proceso de eliminar errores, entonces la programación es el proceso de agregar errores. </ q > 
</ figure >

Formato predeterminado

La mayoría de los navegadores muestran el elemento <figure> estableciendo la propiedad display en block, y estableciendo el valor de margin-top y margin-bottom to 1em; el valor de margin-left y margin-right to 40px:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}