The blockquote element is often used for pullquotes, to highlight and bring attention to specific quotes in an article, or to even make whole paragraphs stand out. However, this is not quite correct usage of the element. And many people may not be familiar with q, either.

The common thing among all three elements is that they are used to quote or reference other pieces of work. This article is a brief rundown of the blockquote, cite and q elements and examples of their usage.

blockquote

The blockquote element is a widely used element. It is used for an extended quotation, one that is meant to be displayed as a block element. It is an element separate from other paragraphs of text around it, or other images or figures. (However, as per my talk, it can form part of the content of a figure.)

The default browser appearance of blockquote is that the content of the element appears indented from both left and right sides. Because of this, when developers simply want indented text, the element is misused for text that is not an extended quotation. In cases where you just want indentation for presentational purposes, you should add a margin to the specific element for the desired effect.

<blockquote>
    People observe the colors of a day only at its beginnings and ends, but to me it’s quite clear that a day merges through a multitude of shades and intonations with each passing moment. A single hour can consist of thousands of different colors. Waxy yellows, cloud-spot blues. Murky darkness. In my line of work, I make it a point to notice them.
</blockquote>

Another example of blockquote usage is under cite below – it uses paragraph tags as it is necessary, however, using them is not required.

cite

Both an attribute and and element, cite in element usage is a reference to a creative work. This can be the title of a book, film, or play; it can also refer to a music album, song, or even a software application. Here is a list of examples:

  • Mean Girls
  • The Hitchhiker’s Guide to the Galaxy
  • Rubber Soul
  • Stairway to Heaven

This is an example of cite in a paragraph, and where you would most commonly use it:

<p>Part of the James Bond film <cite>Casino Royale</cite> was filmed at Villa del Balbianello.</p>

When using blockquote, remember that if you choose to cite the source of the quote inside the element, you should be using cite.

<blockquote>
    <p>I don’t know how you are so familiar to me—or why it feels less like I am getting to know you and more as though I am remembering who you are. How every smile, every whisper brings me closer to the impossible conclusion that I have known you before, I have loved you before—in another time, a different place, some other existence.</p>
    <cite>Soul Mates</cite>, Lang Leav
</blockquote>

Most browsers will italicise any text in between cite tags. This can, of course, be overridden with the font-style CSS property.

You can also use cite as an attribute. When doing this, it needs to contain a URI. You can apply it to the blockquote element, like the example below, but you can also use it in q (see the next section).

<blockquote cite="https://daringfireball.net/projects/markdown/syntax">
    Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags.
</blockquote>

q

Although blockquote and cite can be a little confusing, q is relatively easy to understand. It is used for short, inline quotations that don’t need line breaks. If you are quoting someone within a paragraph, you would use q.

<p>Martin Luther King once said, <q>Love is the only force capable of transforming an enemy into a friend.</q></p>

Most browsers will apply curly quotes around the q element. If writing in a language other than English and the language is specified in the html tag, the default quotation marks of that language will apply.

If you have a URI to reference, you can apply cite as an attribute to the q element.

If the quote is longer, using blockquote is advised.

Conclusion

Hopefully this article gave you some new information about the blockquote, cite and q elements and how to use them correctly in your work. It may not be often that you would need to use these, but knowing when they can be used can come in handy. I know I enjoy using elements that I rarely get a chance to use!