Figure example with caption

figure-demo

<style>
  .media-module {
    width:300px; border:solid;padding:10px;margin:0;
  }
  .media-module .main-item {
    width:100%; height:auto; background:#ccc;
  }
  .media-module .caption {
    font-size:.75em;
    margin-top:.5em;
  }
</style>

<!-- for info regarding the figure element see: 
http://webdesign.about.com/od/html5tags/qt/understanding-figure-and-figcaption-html5.htm 
-->
  
  <figure id="figure-1" class="media-module">
    <h3>Humpback Whale, <em>Sighted</em>, 1956</h3>
    <a href="https://images.unsplash.com/photo-1518877593221-1f28583780b4">
      <img src="https://images.unsplash.com/photo-1518877593221-1f28583780b4" class="main-item" alt="happy whale">
    </a>
    <figcaption class="caption">
      <span>
        <strong>The whales</strong> can often be seen with their heads above water, checking out their surroundings, or slapping their tails on the surface. There is so much activity in the area that they are now thought to be breeding in the Port-Gentil waters.
      </span>
    </figcaption>
  </figure>