Better figure captions in Jekyll using HTML5

Jekyll static webpage generation allows seamless mixing of HTML5, Markdown and Liquid syntax. Here are a couple ways to have beautifully auto-scaling images in Jekyll webpages.

HTML5

<figure>
<img alt="three birds on a branch" src="/images/3birds.jpg" style="width:50%">
<figcaption>Three birds on a branch near Newington, CT. By John Doe.</figcaption>
</figure>

This HTML5 in your Jekyll Github Flavored Markdown files will produce a 50% width scaled and captioned image, with the img alt tag for SEO and screen readers.

HTML5 Subfigures

Jekyll HTML5 subfigures are created via nested figures.

HTML5 Subfigure Example