<blockquote>
A longer quotation from another source, displayed as a separate, indented block.
- Display
- block
- Closing tag
- Required
- Permitted content
- Flow content
Example
#<figure>
<blockquote>
<p>After three months of learning, I built my first app. Short, daily exercises helped me the most.</p>
</blockquote>
<figcaption>Julia, graduate of the JavaScript course</figcaption>
</figure>Definition and usage
#The <blockquote> element marks an extended quotation from another source: a passage from a book, an expert’s statement, or a customer’s review. Browsers display it as a separate block with margins on both sides.
You can record the source address in the cite attribute, but the browser doesn’t display it. Put the author and title the reader should see outside the quote itself, ideally in the <figcaption> of a <figure> that wraps the quote. Mark the work’s title with a <cite> element too.
A short quote woven into a sentence is marked with the <q> element. <blockquote>, meanwhile, isn’t for creating indentation: if you just want to push text away from the edge, use CSS.
Syntax
#<blockquote cite="source-address">
<p>Quote content.</p>
</blockquote>Attributes
#URL
The address of the document or page the quote comes from. It isn’t displayed, but scripts and crawlers can read it. Give the source the user should see in the visible content.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#cite
URLThe address of the document or page the quote comes from. It isn’t displayed, but scripts and crawlers can read it. Give the source the user should see in the visible content.
<blockquote cite="https://www.codeworlds.com/blog/how-to-learn">
<p>Twenty minutes a day gets you further than one long study weekend a month.</p>
</blockquote>More examples
#<blockquote>
<p>Don't learn everything at once. Build something small, and the gaps in your knowledge will surface on their own.</p>
</blockquote>
<p>From the <cite>Everyday Code</cite> newsletter</p>Default CSS
#Most browsers display this element with these default styles:
blockquote {
display: block;
margin-block: 1em;
margin-inline: 40px;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Don’t use
<blockquote>for indentation. Pushing text over is a job for CSS. - Give the quote’s author outside the element, e.g. in a
<figcaption>inside a<figure>. - Mark a short quote in the middle of a sentence with
<q>, and the browser will add the quotation marks on its own.
Related entries
#Spotted a mistake or missing an example? Write to us.