Displaying images with a caption

Unless an image already includes a caption, it is in many cases advisable to include one.

Those familiar with HTML5 may know that there is a tag just for that!

It’s aptly named <figure>. Let’s see how it works.

Add an HTML image link with a caption with the <figure> tag wrapping the <img> tag:

The next Markdown cell contains this HTML code:

<figure style="display:inline-block; text-align:center">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1d/Sancerre_france.jpg/405px-Sancerre_france.jpg" 
       alt="x"
       style="display:block; width:600px; height:400px;"
       title="Sancerre, France"
   >
  <figcaption style="color:teal; font-weight:bold; font-family: Arial, Helvetica, sans-serif;">
       Figure 1 - A long view of Sancerre, France. Source: <a href="https://en.wikipedia.org/wiki/Sancerre">wikipedia</a>
  </figcaption>
</figure>

Figure 1 - A long view of Sancerre, France.  Source: wikipedia

Info:
  * img.src can be local
  * img.title attribute holds the tooltip text

Figure 2 (local) - John Finley