How I display blockquotes

I have blogged in the past about how my website is the product of incremental improvements: tiny changes I make as I learn more about the web. For example, how I display the blockquote HTML element has changed as I have learned more about content presentation. This got me thinking that I should document some of the design patterns on my blog, noting how they work and why I have designed things in the way that they are. Herein begins a new series on that topic, starting with blockquotes.

What is a blockquote?

blockquote is a HTML element used to structure quotes. You could use a blockquote to mark up a quote from a blog, a research paper, a transcribed quote from a video or podcast, and more. By using the blockquote tag, you can explicitly say in your code that the enclosed text is a quote.

How I display blockquotes

By default, blockquote elements are indented on a page. This helps visually distinguish the blockquote from the rest of the text on a page. You can apply more styles to further separate blockquotes from the content on your web page.

Here is how a blockquote looks on my website:

I shake it off, I shake it off

I apply the following styles to display blockquotes:

blockquote {
    font-style: italic;
    border-left: green 3px solid;
    padding-left: 10px;
    background-color: #eee;
}

First, I italicise the text in blockquotes. I add a border to the left, a style I have seen on several websites. This border further differentiates the blockquote from the page. I set padding within the element so that the text does not overlap with the green border. Then, I apply a grey background colour.

Together, these styles significantly distinguish quotations from text.

My website also supports dark mode. In dark mode, I remove the background colour and set the text to white. The green border ensures that the text is still visually distinct, without relying on a background colour. With that said, I may add one in the future.

How I cite sources of content in blockquotes

When I use a blockquote that references a specific text – for example, a blog post – I will provide a citation to the original source as a link. I usually include this link in the sentence where I introduce the quoted text, which comes immediately before the blockquote. There is no particular reason I take this approach. It is what has worked well for me when authoring posts.

For example, I might say:

As Taylor Swift said in Shake it Off:

I shake it off, I shake it off

There are other ways to do citations, however. You may include the name of an author at the end of a quote, like:

I shake it off, I shake it off - Taylor Swift

You can use the HTML <cite> element to state the source you are citing, too. You can enclose a link in a <cite> tag, too. I recommend referring to the MDN cite page for examples on the cite tag. You can use the cite attribute on a blockquote, like <blockquote cite="https://example.com">, but this link is not visually presented anywhere. You could use the cite attribute with custom JavaScript that displays the link visually.