HTML <blockquote> Tag
Learn the HTML <blockquote> tag for quoting content from another source, the cite attribute, attribution with <footer> and styling.
The HTML <blockquote> tag marks up a block of text that is quoted from another source — an article, a book, a speech, another website. It is a semantic element, not a styling tool: it tells browsers, search engines, and assistive technologies that the enclosed content is a quotation, which can affect how the page is indexed and how it is announced to screen reader users.
Browsers render <blockquote> with left and right indentation by default. That indentation is a convenience, not the point of the element. Using <blockquote> purely to indent text is an anti-pattern — it adds false meaning to your markup. When you only need visual indentation, use CSS (margin, padding) on a <div> or <p> instead.
<blockquote> is a block-level element and can contain other block content: paragraphs, lists, headings, and a <footer> for attribution. It is placed within the <body> tag.
When to use <blockquote> vs <q>
Use <blockquote> for long, standalone quotations that form their own block. Use the inline <q> tag for short quotations that flow within a sentence — browsers automatically wrap <q> content in quotation marks, while <blockquote> does not add quote marks.
For short, inline quotes within a paragraph, reach for the <q> tag instead.
Syntax
The <blockquote> tag comes in pairs. The content is written between the opening (<blockquote>) and closing (</blockquote>) tags.
Example of the HTML <blockquote> tag:
HTML <blockquote> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
</body>
</html>The attribution pattern: <blockquote> with <footer> and <cite>
A bare <blockquote> does not tell the reader who said the words or where the quote came from. The recommended, accessible way to attribute a quotation is to follow the quote with a <footer> containing a visible <cite> for the source:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>
— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite>
</footer>
</blockquote>
</body>
</html>The <cite> element renders in italics by default and names the work being quoted. Because it is part of the page text, every reader sees it — unlike the cite attribute on <blockquote>, which is explained below.
Example of the HTML <blockquote> tag used with the <q> tag:
Example of the HTML <blockquote> tag with the HTML <q> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> A quote from the Cheshire Cat, in the popular children's book, Alice In Wonderland, written by Lewis Carroll</p>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
I'm not crazy, my reality is just different than yours.
</blockquote>
<q cite="https://www.wikiquote.org/">He who can, does, he who cannot, teaches.</q>
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
| cite | URL | Specifies the source document or message the quotation was taken from. The value can be a relative or an absolute URL. |
The <blockquote> tag also supports the Global Attributes and the Event Attributes.
The cite attribute is machine-readable only
It is easy to confuse the cite attribute with the <cite> element. The key limitation of the cite attribute is that its URL is not displayed to users — browsers do not render it as a visible link. It exists only for machines: search engines, scripts, and other tools that read the page source.
<blockquote cite="https://example.com/source">
This URL is in the markup, but no reader will ever see or click it.
</blockquote>That is why the cite attribute is not a substitute for visible attribution. To credit a source for human readers, add a visible <cite> element (typically inside a <footer>, as shown above). Use both together: the attribute for machines, the element for people.
Accessibility
Screen readers generally do not announce that a <blockquote> is a quotation, and they ignore the cite attribute entirely. So if the only thing marking your text as a quote is the indentation or the cite attribute, a non-sighted user has no way of knowing it is quoted.
The practical takeaway:
- Pair every
<blockquote>with visible attribution (a<footer>and<cite>) so the source is part of the readable content. - Don't rely on the
citeattribute alone to communicate the source. - Never use
<blockquote>for non-quoted content just to get the indent — it gives screen reader users (and search engines) misleading information.
How to style the <blockquote> tag
By default browsers indent <blockquote> with margins. A common pattern is to remove that default and add a colored left border, padding, and italics to make the quote stand out:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
blockquote {
margin: 1em 0;
padding: 0.5em 1.5em;
border-left: 4px solid #1c8d27;
background-color: #f4f4f4;
font-style: italic;
color: #333;
}
blockquote footer {
margin-top: 0.5em;
font-style: normal;
font-size: 0.9em;
color: #666;
}
</style>
</head>
<body>
<blockquote cite="https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland">
<p>I'm not crazy, my reality is just different than yours.</p>
<footer>— The Cheshire Cat, in <cite>Alice's Adventures in Wonderland</cite></footer>
</blockquote>
</body>
</html>To control only the indentation, use the margin-left, margin-right, or margin shorthand property.