En HTML, la etiqueta <figure> se usa para incluir información independiente, como ilustraciones, diagramas, fotografías o listas de códigos en un documento. Está vinculado al flujo principal, pero se puede usar en cualquier lugar de un documento, y la figura fluye con el contenido, por lo que eliminarla no debería afectar el flujo del documento. HTML5 incluye una nueva etiqueta para este propósito. Debido a que el elemento <figure> es una raíz de sección, el contorno de su contenido se elimina del contorno principal de la página.
Uso de la etiqueta Figura:Para incrustar una imagen en una página HTML, utilice el elemento <img>. Las imágenes están vinculadas a páginas web en lugar de colocarse en ellas. El elemento <img> genera un marcador de posición para la imagen especificada. El elemento <figcaption> se utiliza para dar un título a una imagen. Es una etiqueta opcional que puede aparecer antes o después del contenido de la etiqueta. Aunque el elemento en sí puede incluir varios componentes adicionales, como o, solo se puede anidar un elemento dentro de una etiqueta. El elemento se usa con el elemento y puede ser el primer o el último hijo del elemento. Una <figura> suele ser una imagen, una ilustración, un diagrama, un fragmento de código u otro elemento al que se hace referencia en el flujo principal de un documento, pero que se puede reubicar en otra parte del texto o en un apéndice sin interrumpir el flujo principal. El esquema del contenido de la <figura> El elemento se omite del esquema principal de la página ya que es una raíz de sección. Un título se puede conectar con el elemento <figure> colocando un <figcaption> como el primer o último hijo dentro de él. El título de la figura se proporciona como el primer elemento <figcaption> que se encuentra en la figura.
Sintaxis:
<figure>
<img src="....">
<figcaption>.......</figcaption>
</figure>
Parámetros:
- img src: esta etiqueta se usa en el documento para incluir una fuente de imagen.
- figcaption: este elemento se utiliza para especificar el título de la imagen.
Ejemplo 1: En este ejemplo, para marcar una imagen geeksforgeeks en un documento, usaremos el elemento <figure> y el elemento <figcaption> para especificar un título para la imagen.
HTML
<!DOCTYPE html> <html> <head> <title>geeksforgeeks</title> </head> <body> <figure> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210823163000/1.png" alt="gfg" width="320" height="250"> <figcaption> GeeksforGeeks | A computer science portal for geeks </figcaption> </figure> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, usaremos una etiqueta de figura con múltiples imágenes anidadas dentro de un solo elemento <figure> con un solo título .
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <figure> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210727192049/CP_ad_icon.png" width="110"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203145720/DSA-SP_1-min.png" width="110"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210609101834/GC-LIve-Icon-1.png" width="110"> <figcaption> GeeksforGeeks | A computer science portal for geeks </figcaption> </figure> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyavermaa1198 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA