Etiqueta <FIGURE>

La etiqueta <figure>, perteneciente a las nuevas etiquetas semánticas. Permite especificar contenido autónomo como pueden ser ilustraciones, diagramas, fotos, listas de código, etc.



Aunque el contenido de la etiqueta debe guardar relación el contenido principal, la posición de la etiqueta se considera independiente, por tanto, si se quitara la misma, no debería quedar afectado el contenido principal.

Junto a la etiqueta, se suele utilizar otra etiqueta denominada <figcaption></figcaption>, la cual permite especificar una denominación o nombre para la figura insertada.

Esta última etiqueta se ha de situar bien como primer elemento de contenido de la etiqueta <figure>, o como último elemento de la misma.

La sintaxis de la etiqueta es la siguiente.

<figure>
	<figcaption>Denominación de la figura</figcaption>
	Contenido de la figura …
</figure>

El siguiente ejemplo muestra el uso de la etiqueta en un documento web.

<!DOCTYPE HTML>
<html>
<head>
  <title>Ejercicios prácticos HTML5</title>
  <meta charset="utf-8">
  <meta name="author" content="José Sáez">
  <meta name="description" content="Ejercicios prácticos HTML5">
  <meta name="generator" content="www.aprendoencasa.com, Curso práctico HTML5">
  <meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<header>
    <h1>Utilización de figure</h1>
</header>
<section id="Principal">
    <header>
        <h1>Sección</h1>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
    <figure>
        <figcaption>Logotipo del lenguaje HTML5</figcaption>
        <img src="images.jpg" title="logotipo html5" alt="logotipo html5">
    </figure>
</section>
</body>
</html>

El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la siguiente imagen.

Etiqueta Figure, HTML5

ejercicios y prácticas HTML5, etiqueta Figure

Busca tu articulo

Utiliza este buscador para encontrar el articulo que te interesa, si no existe la practica o ejercicio, deja un comentario proponiendo que realicemos un articulo sobre el, gracias por vuestra visita y un saludo!!

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages