Teoría
Teoría

Las etiquetas figure y figcaption

En nuestra galería, cada miniatura lleva a una página con una foto de tamaño completo y su descripción. Juntas forman una unidad bastante independiente: más adelante podríamos insertarla en otra página del blog. ¿Cómo conviene marcarla?

La etiqueta <figure> es ideal para esto. Agrupa material que ilustra o complementa el contenido de un documento, como diagramas, gráficos, ejemplos de código o tablas.

Ese material suele llevar una explicación o un pie. Para marcarlo usamos <figcaption>, que se coloca como primer o último elemento dentro de <figure>. Por ejemplo:

<figure>
  Un esquema, gráfico, diagrama o ejemplo de código
  <figcaption>Descripción del contenido</figcaption>
</figure>

Vamos a usar <figure> para marcar la foto de nuestra galería. ¡Manos a la obra!

Los navegadores suelen añadir márgenes a figure. Por eso preparamos estilos para figure y figcaption; puedes verlos en la pestaña style.css.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> <a href="day-15.html">Volver a la entrada</a> </nav> </header> <main> <article>  <img src="files/keks-1.jpg" width="486" height="315" alt="Cupcake"> <nav class="pagination"> <a href="#">< Anterior</a> <a href="photo-2.html">Siguiente ></a> </nav> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } aside { margin: 20px 0; color: #c4c4c4; } a[href] { color: #0099ef; text-decoration-line: underline; } figure { margin-left: 0; margin-right: 0; } figure img { vertical-align: middle; border: 8px solid rgb(202, 224, 248); } figcaption { width: 502px; padding-bottom: 8px; font-size: 12px; letter-spacing: 0.02em; font-style: italic; text-align: center; background-color: rgb(202, 224, 248); } .pagination a { display: inline-block; margin-right: 30px; margin-bottom: 15px; } .pagination { text-align: center; }

ObjetivosRealizado

Envuelve la imagen en una etiqueta figure.
Añade dentro de figure un figcaption con la descripción El atento instructor Cupcake vigila que todo esté en orden.