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.
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!!
