Quotations and Citations

The Blockquote Element

The <blockquote> element is used for longer quotations that should be displayed as a separate block of text, typically indented from the surrounding content.

<blockquote>
  <p>The only way to do great work is to love what you do.</p>
</blockquote>

Adding a Source with the cite Attribute

You can use the cite attribute to specify the source URL of the quotation:

<blockquote cite="https://example.com/source">
  <p>Innovation distinguishes between a leader and a follower.</p>
  <footer>— Steve Jobs</footer>
</blockquote>

Note: The cite attribute is primarily for machines (like search engines). To show the source visually to users, you should include it in the content itself.

The Q Element for Inline Quotes

The <q> element is used for short, inline quotations within a paragraph. Browsers automatically add quotation marks around the content.

<p>
  As Benjamin Franklin said, 
  <q>Tell me and I forget. Teach me and I remember. Involve me and I learn.</q>
</p>

The browser will render this as:

As Benjamin Franklin said, "Tell me and I forget. Teach me and I remember. Involve me and I learn."

The Cite Element

The <cite> element is used to reference the title of a creative work, such as a book, article, song, movie, or painting.

<p>
  My favorite book is <cite>To Kill a Mockingbird</cite> by Harper Lee.
</p>

<p>
  The article <cite>The Future of Web Development</cite> discusses 
  emerging technologies.
</p>

Complete Example: Combining Elements

Here's how you might use all three elements together in a blog post or article:

<article>
  <h2>The Power of Persistence</h2>
  
  <p>
    In his book <cite>Think and Grow Rich</cite>, Napoleon Hill wrote:
  </p>
  
  <blockquote cite="https://example.com/think-and-grow-rich">
    <p>
      Strength and growth come only through continuous effort and struggle.
    </p>
    <footer>— Napoleon Hill, <cite>Think and Grow Rich</cite></footer>
  </blockquote>
  
  <p>
    This reminds me of what Thomas Edison once said: 
    <q>Genius is one percent inspiration and ninety-nine percent perspiration.</q>
  </p>
</article>

Styling Considerations

By default, browsers apply some basic styling to these elements:

• <blockquote> is typically indented with margins
• <q> automatically adds quotation marks
• <cite> is usually displayed in italics

You can customize this styling with CSS, but the semantic meaning remains important for accessibility and SEO.

Best Practices

When to Use Blockquote

• For longer quotes (multiple sentences or paragraphs)
• When you want the quote to stand out visually
• For testimonials or pull quotes
• When citing external sources

When to Use Q

• For short quotes within a sentence or paragraph
• When the quote flows naturally with surrounding text
• For inline dialogue or brief references

When to Use Cite

• For titles of books, articles, songs, movies, etc.
• When referencing creative works
• NOT for citing people's names (use regular text for that)

Common Mistakes to Avoid

<!-- Don't use blockquote just for styling -->
<blockquote>
  <p>This isn't actually a quote, just indented text.</p>
</blockquote>

<!-- Don't use cite for author names -->
<p>Quote by <cite>Albert Einstein</cite></p>

<!-- Use CSS classes for styling, blockquote for quotes -->
<p class="indented">
  This is just styled text, not a quote.
</p>

<!-- Author names are regular text -->
<p>Quote by Albert Einstein</p>

Accessibility Notes

Using the correct semantic elements helps screen readers understand and properly announce quotes to users:

• Screen readers may announce blockquotes as quoted content
• The cite attribute provides machine-readable source information
• Proper semantic markup improves document structure

Key Takeaways

What's Next?

Now that you know how to properly mark up quotations and citations, you're ready to learn about displaying code and preformatted text in your web pages. In the next lesson, we'll explore the <pre>, <code>, and <kbd> elements.