This week's challenge prompt is a little bit of a throwback to last month's HTML buddies challenge, but with a blogging twist!

Images are a staple in blog posts. They provide context, break up the text, and draw eyeballs. It's often useful to be able to set some text right beside an image, and the semantically appropriate HTML for that is the figure and figcaption tags. This is a bit of a throwback to last month's HTML buddies!

Your challenge: design a beautiful and/or unique figure and figcapation pairing.

Hey look, even this blog has this common design pattern:

This is a dog. Dog wonders what you'll come up with this week.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag: cpc-figures. We'll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

  1. There normally isn't much interactivity to a figure/figcaption, but could there be? Should there be?
  2. Incorporate your figure/figcaption design into a larger context. Perhaps variations on design and placement. Maybe last weeks typesetting challenge could provide a home.
  3. Images can be such a challenge for front end developers these days. Maybe this is a good excuse to play with technologies like responsive images, alternate image formats, or lazy loading.

Resources

  1. Did you know you aren't limited in any way to using multiple images within the figure? That's covered in Richard Clark's HTML5 Doctor article.
  2. Searching around right here on CodePen might stir up some ideas.
  3. Looking at the almighty MDN, there is an interesting fact noted that the figcaption must be the first or last child. Hmmmmm.

Thanks to our Sponsor!

This month's challenge is sponsored by Jetpack — the ideal way to experience WordPress. We use it right here on this blog!

JetPack is a WordPress plugin that combines all sorts of powerful functionality into a single plugin. Here's a handful of things it can do:

  • Secure and back up your site.
  • Connect your social media accounts for easy publishing after posting.
  • Enable Markdown and editing enhancements.
  • Increase performance though CDN-hosted and responsive images and video.