Mostofreddy HTML5: tag figure
HTML5 trajo con él muchos nuevos tags, entre ellos: figure.
El tag figure nos permite agrupar semánticamente algunos elementos como puede ser una imagen con su epigrafe, una nube de tags (cloudtags), etc, con esto logramos tratar la información dentro de él de forma independiente al resto del contenido.
Este elemento puedo ir acompañado por otro elemento llamado figcaption, el cual se comporta como una leyenda del contenido dentro de figure
La documentación oficial nos dice
The figure element represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.
The first figcaption element child of the element, if any, represents the caption of the figure element’s contents. If there is no child figcaption element, then there is no caption.
Les dejo un ejemplo usando imagenes
figure {
float: left;
border: 1px solid gray;
padding: 0.25em;
margin: 0 0 1.5em 1em;
}
figcaption {
text-align: center;
font: italic 0.9em Georgia, "Times New Roman", Times, serif;
line-height:50px;
}
<figure> <img src="http://farm6.static.flickr.com/5176/5457404834_45aaf3bbe9.jpg" alt="Hermosos colores!"> <figcaption>Hermosos colores!!!!</figcaption> </figure>