HTML significa lenguaje de marcado de hipertexto. Se utiliza para diseñar páginas web utilizando un lenguaje de marcado. HTML es la combinación de hipertexto y lenguaje de marcado. El hipertexto define el vínculo entre las páginas web. Se utiliza un lenguaje de marcado para definir el documento de texto dentro de la etiqueta que define la estructura de las páginas web.
En este artículo, aprenderemos cómo agregar subtítulos para el contenido principal.
En HTML, tenemos una etiqueta <figcaption> que se usa para dar un título al contenido principal. Este contenido principal se define bajo la etiqueta <figura>. Aprendamos más sobre ambas etiquetas.
figura: se utiliza para incluir información independiente, como ilustraciones, diagramas, fotografías o listados de códigos en un documento. 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.
figcaption: La etiqueta <figcaption> en HTML se usa para establecer un título para el elemento de figura en un documento. Esta etiqueta es nueva en HTML5.
Sintaxis:
<figcaption> Figure caption </figcaption>
Veamos ejemplos de cómo podemos agregar un título al componente principal.
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> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Adding caption for the parent content.</h2> <figure> <h3 style="color:red">I am a Parent Content</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png" alt="gfglogo" style="width:50%,height:50%"> <!--HTML figcaption tag starts here--> <figcaption> GeeksforGeeks Logo </figcaption> <!--HTML figcaption tag ends here--> </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> <body> <h1 style="color:green">GeeksforGeeks</h1> <h2>Adding caption for the parent content.</h2> <figure> <h3 style="color:red">I am a Parent Content</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/geeks-25.png" alt="gfglogo" style="width:50%,height:50%"> <!--HTML figcaption tag starts here--> <figcaption> GeeksforGeeks Logo </figcaption> <!--HTML figcaption tag ends here--> </figure> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA