El siguiente es un ejercicio sencillo para aprender a usar a los nuevos tag “figcaption” y “figure” de HTML5. Acá pueden descargar el archivo para que sigan el ejercicio DESCARGAR. Pueden encontrar más detalles en el artículo.
¿Para qué sirve figcaption?
“Figcaption” es una nueva etiqueta de HTML5, significa “figure caption”, permite poner fácilmente textos debajo de fotos. Esto es muy útil porque comúnmente a la hora de construir galerías un requerimiento es incluir un texto acerca de la imagen (autor, fecha, vínculos, etc). Este nuevo tag de HTML5 simplifica este proceso bastante, ya que es su función dedicada. Y también puede ser usado para poner texto debajo de otros elementos, como veremos más adelante.
¿Cómo usar figcaption?
“Figcaption” debe de ser usado dentro de otra nueva etiqueta HTML5 que se llama “Figure”, es decir, por cada “figure” debe haber un “figcaption” (relación uno es a uno).
<figure> <img src="laDirecciónDeMiImagen1"> <figcaption>Este texto aparecerá debajo de nuestra imagen o elemento</figcaption> </figure>
En nuestro ejemplo podemos ver que hay un solo 1 elemento dentro del “Figure”. Pero los elementos dentro de “Figure” pueden ser más de 1, en ese caso, el “Figcaption” se posicionará debajo de todos los elementos contenidos por el “Figure”
<figure> <H1>Este es el título de la composición</H1> <img src="laDirecciónDeMiImagen1"> <img src="laDirecciónDeMiImagen2"> <figcaption>Este texto aparecerá debajo de nuestros elementos</figcaption> </figure>
Es muy importante recalcar que a “Figure” como a “Figcaption” se le puede pasar apariencia tal y como si fuera otra etiqueta html.
La importancia de figure y figcaption: Nuevas etiquetas en HTML5
HTML5 tiene muchas nuevas etiquetas, “Figure” y “Figcaption” son tan sólo un par. La importancia de contar con nuevas etiquetas es que se enriquece el html. El html es muy importante porque es la estructura del proyecto, es como si fuera los elementos del edificio. Tratemos de pensarlo así; si antes construimos en base a divs en nuestro edificio teníamos principalmente fierro, ahora que tenemos nuevos elementos, es como si añadieramos molduras, perfiles, escuadras, etc. Nuestro “edificio” es mejor porque se mejoraron los cimientos de nuestra estructura HTML.
Adicionalmente, las nuevas etiquetas de HTML5 lo que hacen es decir en sí mismas cuál es su función. Esto hace que el código sea más manejable. La introducción de éstos cambios en HTML5 hace que nuestro código se vuelva más entendible porque es más semántico.
- php.ini el enemigo de las plantillas de wordpress - December 1, 2014
- Figcaption, obteniendo mejores galerías en HTML5 - November 14, 2014
- Las nuevas funcionalidades en WordPress 4 - August 23, 2014
- Los plugins de WordPress que me han salvado la vida - August 19, 2014
- Cómo instalar phpmyadmin en Nitrous.io - July 28, 2014
- Cómo destruir una caja en Nitrous - July 18, 2014
- Los 4 problemas más comunes al instalar temas de WordPress - July 9, 2014
- La IDE de Nitrous: Como usar las nuevas funciones - June 11, 2014
- 8 tips para elegir el mejor tema de WordPress y que no te arrepientas - June 3, 2014
- ¿Cómo mejorar la velocidad de carga de tu página web? - May 29, 2014
Leave a Reply