<blockquote> HTML Tag
- Element of
- Learn How Fonts And Web Typography Work In HTML: A Beginner's Guide
- What does
<blockquote> HTML Tag
do? - The <blockquote> element defines a block of text that is a direct quotation. The <quote> element should be used when a quotation is presented inline with the surrounding text, but when the quotation is presented as a separate paragraph, <blockquote> is the appropriate element to use to identify the quotation.
- Display
- block
- Usage
- semantic | textual
Contents
Code Example
When quoting more than a few words in your document, you should use a <code><blockquote></code> to set the quoted text off from the surrounding text.
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae.
</blockquote>
<blockquote>
to set the quoted text off from the surrounding text.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae.
Styling Blockquotes
How you style <blockquotes>
depends on your specific site design, but there are a handful of things that have become fairly common practice. You don’t have to follow them, but you might find that it is helpful to do so. The most common practice for <blockquote>
styling is indentation via CSS margin
. This is usually done just on the left side. In fully-justified text, though, it can be helpful to place margins on both sides of the quote.
.justified { text-align: justify; } blockquote { margin: 0 50px; }
<div class="justified"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus felis eget tempor lobortis. Nunc iaculis lacus risus, a molestie libero facilisis sit amet. Proin vitae diam non leo commodo ullamcorper euismod vel lacus. Morbi iaculis tincidunt enim. Nunc semper facilisis elit, quis pulvinar sem efficitur sit amet.</p> <blockquote> Fusce vestibulum molestie ultricies. Quisque non eros nec leo elementum elementum. Etiam non fermentum leo, in mollis urna. Quisque quis tortor tempus, sollicitudin turpis et, tempus enim. </blockquote> <p> Proin sed tincidunt urna, et auctor mauris. Vestibulum gravida tellus sit amet interdum ultrices. Nulla suscipit odio ut est efficitur sollicitudin.</p> </div>
Fusce vestibulum molestie ultricies. Quisque non eros nec leo elementum elementum. Etiam non fermentum leo, in mollis urna. Quisque quis tortor tempus, sollicitudin turpis et, tempus enim.
Proin sed tincidunt urna, et auctor mauris. Vestibulum gravida tellus sit amet interdum ultrices. Nulla suscipit odio ut est efficitur sollicitudin.
The other very common styling pattern is to place a vertical line or border along the left edge of the blockquote. This is usually done in alignment with the edge of the surrounding text, which requires using padding
in place of margin
to achieve proper indentation. (CSS border
s go inside of margin
and outside of padding
.) You may also want to set the left margin to 0
to override the default margin. This works well whether or not the text is justified.
blockquote { padding: 0 50px; margin-left: 0; border-left: 2px solid gray; }
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum finibus felis eget tempor lobortis. Nunc iaculis lacus risus, a molestie libero facilisis sit amet. Proin vitae diam non leo commodo ullamcorper euismod vel lacus. Morbi iaculis tincidunt enim. Nunc semper facilisis elit, quis pulvinar sem efficitur sit amet.</p> <blockquote> Fusce vestibulum molestie ultricies. Quisque non eros nec leo elementum elementum. Etiam non fermentum leo, in mollis urna. Quisque quis tortor tempus, sollicitudin turpis et, tempus enim. </blockquote> <p> Proin sed tincidunt urna, et auctor mauris. Vestibulum gravida tellus sit amet interdum ultrices. Nulla suscipit odio ut est efficitur sollicitudin.</p>
Fusce vestibulum molestie ultricies. Quisque non eros nec leo elementum elementum. Etiam non fermentum leo, in mollis urna. Quisque quis tortor tempus, sollicitudin turpis et, tempus enim.
Proin sed tincidunt urna, et auctor mauris. Vestibulum gravida tellus sit amet interdum ultrices. Nulla suscipit odio ut est efficitur sollicitudin.
Using <cite>
with <blockquote>
Some people recommend using the <cite>
element to identify the source of a quote.
<blockquote> You should use the <cite> element to identify the source of a quote. —<cite>Some People</cite> </blockquote>
However, this is not allowed according to the HTML5 standard. There is some contention about what exactly the <cite>
element should contain, but both the W3C and WHATWG agree that this is not how the element should be used. The <cite>
element should be used to identify the title of a work, not its author or the source of an arbitrary quote.
<blockquote> The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.) —<cite><a href="https://html.spec.whatwg.org/multipage/semantics.html#the-cite-element">HTML Living Standard</a></cite>, Web Hypertext Application Technology Working Group </blockquote>
The cite element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing. A person’s name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people’s names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.) —HTML Living Standard, Web Hypertext Application Technology Working Group
While the W3C’s recommendation for HTML5 said that the <cite>
element could include an 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 used the <blockquote>
element, but very few composers of HTML documents know about or use the <q>
element, which represents a inline quote. Since quote punctuation marks are actually different in different regions, you may want to consider using <q>
as an alternative to typographical quote marks.
Browser Support for blockquote
All | All | All | All | All | All |