Elemento figure en HTML

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 contenidoElemento organizativo.
Contenido permitidoContenido reglamentario seguido de elemento <figcaption>, elemento <figcaption> seguido de contenido reglamentario o simplemente contenido reglamentario.
AcrónimoLas etiquetas de inicio o finalización no se pueden omitir.
Elementos del padreCualquier elemento que acepte contenido normativo.
Interfaz DOMOHTMLElement

Soporte de navegadores

ChromeFirefoxEdgeSafariÓpera
84.0Soportado5.111.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;
}