Changing to <figure>

One of the nice things I've settled into with Eleventy powering this blog is I can mix markdown with HTML in the same area when creating a post/page. I know that it'll all get processed and rendered as HTML in the browser.

Take blockquotes for instance. Markdown just requires I start the line with a > and when rendered it'll wrap that in the HTML <blockquote> element.

> This is a blockquote

<blockquote>This is a blockquote</blockquote>

This is nice and quick. But I like to include attribution to quotes I put in. Who said it, where it was said, and a link to it if it was online. There's no way to include that in Markdown.

It either becomes part of quote and I have to do some CSS hoop-jumping to get it out of the quotation marks, or it sits outside of the element and looks detached, leading to more CSS.

After much searching I liked the MDN example of wrapping it the <figure> element.

It passes the smell test for the intent of a figure (represents self-contained content, potentially with an optional caption) and gives me some legitimate hooks to use CSS without extra <div> and <span> elements.

I created the following clip in Coda so I can just drag-and-drop it in.

<figure class="blockquote">
    <blockquote cite=“link to original”>
        <p>Quoted text</p>
    </blockquote>
    <figcaption>— Person, <cite>Where it’s from</cite></figcaption>
</figure>

And here it is styled

This is nice and quick. But I like to include attribution to quotes I put in. Who said it, where it was said, and a link to it if it was online.

And yes, I know, I use a class name to describe the thing it is.

So now I'm off to go through and replace all my markdown blockquotes with this HTML version. Another downside of using Markdown is I can't find & replace. Search for > and see how many matches you get in your site.