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
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
q elements and examples of their usage.
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
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.
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>
blockquote, remember that if you choose to cite the source of the quote inside the element, you should be using
<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>
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
<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
If the quote is longer, using
blockquote is advised.
Hopefully this article gave you some new information about the
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!