Creating a custom blockquote with semantic HTML
The basic Markdown syntax allows for blockquotes, but it doesn’t allow for citations in blockquotes. Let’s add that functionality to our site with a shortcode. While we could use a regular shortcode with the quotation inside an argument, the developer experience of that is a little lacking. In this case, we can use an 11ty paired shortcode. A paired shortcode is a shortcode that has an opening tag and a closing tag, much like the standard conditional or for loop in Liquid.
Creating the proper semantic HTML for a block quote
Let’s start with the proper HTML for a blockquote. According to MDN, a block quote should be inside a figure with a figcaption to describe the author and the cited media source, which should reside within a cite tag:
