Es probable que en una página quieras meter una imagen y que esta tenga un pie de foto. En HTML5 hay 2 elementos que permiten esto, figure y figcaption.
Tanto la ilustración como el figcaption están dentro del elemento figure. En mi caso uso una imagen de unos 400px.
|
1 2 3 4 |
<figure> <img src="post-its.jpg" alt="Monton de post-its" /> <figcaption>Esta es una foto con todos los post-it de tareas pendientes.</figcaption> </figure> |
Ejemplo de figure con pie de página
En este caso figure contiene una imagen pero, no quiere decir que este restringido a un tipo de contenido. Puede usarse para especificar códigos de ejemplo, fotos, audio, tablas de datos…
Según w3 es una unidad de contenido que puede tener un pie y es independiente, pudiendo ser apartado del flujo principal del documento sin afectar al significado del documento. Algo muy similar con el elemento aside.
Para saber si usar aside o figure, piensa si el contenido es esencial para entender el contenido que tiene alrededor. Si no lo es, usa aside. De la otra forma, figure es lo más apropiado.
Puntos a tener en cuenta
- Figcaption es opcional y puede estar en cualquier parte dentro del elemento figure, si antes o después del contenido de figure.
- Figure puede usarse para otros elementos, no es preciso usar solamente imágenes.
Y aquí finaliza el tutorial de hoy sobre los elementos figure y figcaption , espero que os haya gustado. A seguir picando 🙂