Quotations & Citations
Learn to properly quote and cite content using HTML's semantic elements. Master blockquotes, inline quotes, citations, and give proper credit to sources.
Why Proper Quoting Matters
Using semantic quote elements improves readability, SEO, and gives proper attribution to sources.
📚 Academic Integrity
Properly credit sources and avoid plagiarism
🔠SEO Benefits
Search engines recognize quoted content as references
♿ Accessibility
Screen readers announce quotes with proper context
📖 Readability
Visual distinction helps readers identify quoted content
The <blockquote> Element
The <blockquote> element is for long quotations that form a separate paragraph or section.
<blockquote>
<p>
The only way to do great work is to love what you do.
If you haven't found it yet, keep looking. Don't settle.
</p>
</blockquote>Renders as:
The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.
Adding Source Attribution
<blockquote cite="https://www.example.com/article">
<p>
The only way to do great work is to love what you do.
If you haven't found it yet, keep looking. Don't settle.
</p>
<footer>
— <cite>Steve Jobs</cite>, Stanford Commencement Address (2005)
</footer>
</blockquote>Renders as:
The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle.
The cite Attribute:
- Contains a URL to the source document
- Not displayed visually (for machines, not humans)
- Helps search engines understand the quote's origin
- Should contain a full URL
The <q> Element (Inline Quotes)
The <q> element is for short, inline quotations within a sentence.
<p>
As Benjamin Franklin once said,
<q>Tell me and I forget, teach me and I may remember, involve me and I learn.</q>
</p>Renders as:
As Benjamin Franklin once said,Tell me and I forget, teach me and I may remember, involve me and I learn.
<q> content. The style varies by language (e.g., "English" vs. «French»).With Source Citation
<p>
According to the W3C,
<q cite="https://www.w3.org/standards/">
The Web is designed to work for all people, whatever their hardware,
software, language, location, or ability.
</q>
</p>The <cite> Element
The <cite> element represents the title of a creative work being referenced (book, article, movie, song, etc.).
<!-- Citing a book -->
<p>My favorite novel is <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
<!-- Citing a movie -->
<p>I recently watched <cite>The Shawshank Redemption</cite>.</p>
<!-- Citing an article -->
<p>Read more in <cite>The New York Times</cite> article about climate change.</p>
<!-- Citing a song -->
<p>The song <cite>Imagine</cite> by John Lennon is timeless.</p>
<!-- Citing within a blockquote -->
<blockquote>
<p>Quote text here...</p>
<footer>
— From <cite>HTML: The Definitive Guide</cite> by Chuck Musciano
</footer>
</blockquote>Examples:
My favorite novel is The Great Gatsby by F. Scott Fitzgerald.
I recently watched The Shawshank Redemption.
<cite> for people's names. Use it only for titles of works. For people, just use normal text or <strong>.<p>Quote by <cite>Steve Jobs</cite></p> <!-- Wrong! --><p>Quote by <strong>Steve Jobs</strong> from <cite>Stanford Address</cite></p>Complete Quote Examples
Academic Quote
<blockquote cite="https://www.example.com/research-paper">
<p>
Climate change represents one of the greatest challenges of our time.
Immediate action is required to mitigate its effects and protect future generations.
</p>
<footer>
— Dr. Jane Smith,
<cite>Climate Science Review</cite>,
Vol. 45, No. 3 (2024), pp. 123-145
</footer>
</blockquote>Literary Quote
<blockquote>
<p>
It is a truth universally acknowledged, that a single man in possession
of a good fortune, must be in want of a wife.
</p>
<footer>
— Jane Austen, <cite>Pride and Prejudice</cite> (1813)
</footer>
</blockquote>Multiple Paragraph Quote
<blockquote cite="https://example.com/article">
<p>
First paragraph of the quotation. This contains the opening thoughts
of the author on the subject matter.
</p>
<p>
Second paragraph continuing the quotation. Here the author expands
on their initial point with additional evidence.
</p>
<footer>
— Author Name, <cite>Article Title</cite> (2025)
</footer>
</blockquote>Styling Quotes with CSS
Customize the appearance of quotes to match your design:
/* Blockquote styling */
blockquote {
margin: 2rem 0;
padding: 1rem 1.5rem;
border-left: 4px solid #007bff;
background-color: #f8f9fa;
font-style: italic;
position: relative;
}
/* Add opening quote mark */
blockquote::before {
content: "\"";
font-size: 4rem;
color: #007bff;
position: absolute;
left: 10px;
top: -10px;
opacity: 0.3;
}
/* Footer styling */
blockquote footer {
margin-top: 1rem;
font-style: normal;
font-size: 0.9rem;
color: #6c757d;
}
/* Cite styling */
cite {
font-style: italic;
font-weight: 600;
}
/* Inline quote styling */
q {
font-style: italic;
color: #495057;
}
/* Custom quotation marks for inline quotes */
q::before {
content: open-quote;
font-weight: bold;
}
q::after {
content: close-quote;
font-weight: bold;
}Fancy Quote Design
/* Card-style quote */
blockquote.fancy {
margin: 2rem auto;
max-width: 600px;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
font-size: 1.2rem;
line-height: 1.6;
position: relative;
}
blockquote.fancy::before {
content: "\"";
font-size: 6rem;
position: absolute;
top: -20px;
left: 20px;
color: rgba(255,255,255,0.2);
}
blockquote.fancy footer {
margin-top: 1.5rem;
text-align: right;
font-size: 1rem;
font-weight: 300;
}The <abbr> Element (Abbreviations)
While not strictly for quotes, <abbr> is related and often used alongside citations.
<p>
The <abbr title="World Wide Web Consortium">W3C</abbr> maintains web standards.
</p>
<p>
Use <abbr title="HyperText Markup Language">HTML</abbr> for structure and
<abbr title="Cascading Style Sheets">CSS</abbr> for styling.
</p>
<!-- In a citation -->
<p>
Published in the <abbr title="Journal of Computer Science">JCS</abbr>, Vol. 12
</p>Renders as (hover to see tooltip):
The W3C maintains web standards.
Accessibility Considerations
Screen Reader Behavior:
- Blockquotes: Announced as "blockquote" when entering and "end blockquote" when exiting
- Inline quotes (
<q>): Quotation marks are added and announced - Citations: Announced as "cite" to indicate it's a title
- Abbreviations: Title attribute is read when focused
- Always provide source attribution for quotes
- Use
citeattribute with URLs for machine-readability - Use
<cite>element for human-readable titles - Don't rely solely on visual styling to indicate quotes
- Provide context before the quote when possible
Real-World Use Cases
Blog Article with Quotes
<article>
<h2>The Impact of Technology on Education</h2>
<p>
Technology has transformed modern education in unprecedented ways.
As educational expert Dr. Maria Johnson notes,
<q>Digital tools have democratized access to knowledge like never before.</q>
</p>
<blockquote cite="https://example.com/education-report-2024">
<p>
Students who use educational technology show a 23% improvement in
engagement and a 15% increase in test scores compared to traditional
methods alone.
</p>
<footer>
— <cite>Global Education Technology Report</cite> (2024)
</footer>
</blockquote>
<p>
These findings align with earlier research published in
<cite>The Journal of Educational Psychology</cite>, which found similar benefits.
</p>
</article>Product Review with Customer Quotes
<section class="reviews">
<h3>Customer Reviews</h3>
<blockquote>
<p>
This product exceeded all my expectations. The quality is outstanding
and customer service was incredibly helpful.
</p>
<footer>
— Sarah M., Verified Buyer
</footer>
</blockquote>
<blockquote>
<p>
Best purchase I've made this year. Highly recommend to anyone looking
for a reliable solution.
</p>
<footer>
— John D., Verified Buyer
</footer>
</blockquote>
</section>FAQ Section
<section class="faq">
<h2>Frequently Asked Questions</h2>
<article>
<h3>What is your return policy?</h3>
<p>
As stated in our <cite>Terms of Service</cite>, we offer a 30-day
money-back guarantee. Simply contact our support team to initiate a return.
</p>
</article>
<article>
<h3>How long does shipping take?</h3>
<p>
According to our <cite>Shipping Policy</cite>, most orders arrive
within 5-7 business days for standard shipping.
</p>
</article>
</section>Best Practices Summary
✅ Do
- Use
<blockquote>for long quotations - Use
<q>for short inline quotes - Always attribute sources properly
- Use
citeattribute for source URLs - Use
<cite>element for work titles - Provide context around quotes
- Use
<abbr>for abbreviations with titles
⌠Don't
- Use quotes for emphasis (use
<em>or<strong>) - Forget to cite sources
- Use
<cite>for people's names - Use manual quotation marks with
<q> - Use quotes purely for styling
- Plagiarize by not attributing sources
- Mix up
citeattribute and<cite>element