The blockquote tag in HTML

What does the blockquote tag do in HTML?

The blockquote element defines a piece of text that is a direct quote. At the same time, the quote element should be used when the quote appears embedded in the surrounding text. But when the quote is in a separate paragraph, the blockquote tag is a more appropriate element.

When quoting more than a few words in a document, you must use the blockquote tag to
<blockquote>to separate the quoted text</blockquote>
from the surrounding text.

Styling the blockquote element

Your style of blockquote application depends on your particular site design, but there are a few things that have become fairly common practice. You don’t have to follow them, but you may find that they are useful. The most common practice for styling blockquote is to indent with CSS margin. This usually applies only to the left side of the highlighted content, but in fully aligned text, it can be useful to place margins on both sides of the quote.

justified { text-align: justify; } blockquote { margin: 0 45px; }
<div class="justified">
<p>When quoting more than a few words in a document, you must use the blockquote tag to</p>
<blockquote>
to separate the quoted text
</blockquote>
<p>from the surrounding text.</p>
</div>

Another very common style pattern is to place a vertical line or border along the left edge of the quote. Usually blockquote content is aligned with the edge of the text, which requires using padding instead of margin to achieve proper indentation. CSS border are inside the margin and outside the padding. You can also set the left margin (margin) to 0 to override the default margin. This works well whether or not the text is justified.

blockquote { padding: 0 45px; margin-left: 0; border-left: 2px solid gray; }
<p>When quoting more than a few words in a document, you must use the blockquote tag to</p>
<blockquote>
to separate the quoted text
</blockquote>
<p>from the surrounding text.</p>

Using the cite tag instead of blockquote

Some programmers recommend using the cite element to identify the source of the citation. However, this is not allowed under the HTML5 standard. There is some disagreement about exactly what the cite element should contain, but both W3C and WHATWG agree that this element should not be used for citations. The cite element should be used to identify the title of a work, not its author or the source of an arbitrary quotation.

Using the cite tag
<blockquote>
You must use the cite element to identify the source of the quote. -
<cite>Some People</cite>
</blockquote>

Although the W3C recommendation for HTML5 says that the cite element can include the author’s name (along with the title), it is best to follow the WHATWG standard and use it only for the title of the work.

The q element

Almost everyone knows and uses the blockquote element, but very few HTML writers know or use the q element, which is an embedded quotation. Since punctuation varies from region to region, you might consider using the q tag as an alternative to typographical quotation marks.