💬 Quotes & Citations

Learn how to mark up quotes, citations, and contact information

📚 Quote Tags Overview

📌 Key Concept

HTML provides specific tags for quoting text from other sources. Use <blockquote> for long, block-level quotes and <q> for short, inline quotes. The <cite> tag defines the title of a work, and <address> defines contact information.

Tag Meanings

Tag Purpose When to Use
<blockquote> Long block-level quote Multi-line quotes, testimonials, excerpts
<q> Inline short quote Short quotations within text
<cite> Source of a quote or reference Author names, book titles, sources
<address> Contact information Addresses, phone, email, location

💻 Code Examples

📝 Example 1: Blockquote

For long quotations:

<blockquote> "The only way to do great work is to love what you do." <br> <strong>— Steve Jobs</strong> </blockquote>

▶️ Output:

"The only way to do great work is to love what you do."
— Steve Jobs

📝 Example 2: Inline Quote

For short quotes inside a paragraph:

<p>Einstein said, <q>Imagination is more important than knowledge.</q></p>

▶️ Output:

Einstein said, Imagination is more important than knowledge.

📝 Example 3: Citation

Referencing a creative work:

<p>My favorite book is <cite>The Hobbit</cite> by J.R.R. Tolkien.</p>

▶️ Output:

My favorite book is The Hobbit by J.R.R. Tolkien.

📝 Example 4: Address

Contact information for the author/owner:

<address> Written by <a href="mailto:webmaster@example.com">John Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

▶️ Output:

Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

🔧 Tag Attributes

Tag Attribute Description Example
<blockquote> cite Specifies the source URL of the quote cite="https://example.com"
<q> cite Specifies the source URL of the quote cite="https://example.com"

Note: The <cite> and <address> tags primarily use global attributes (like id, class) and do not have specific attributes of their own.

✍️ Practice Assignments

🎯 Assignment 1: Create a Testimonial Card

Easy

Create a customer testimonial using blockquote.

  • Use <blockquote> for the customer's review text
  • Use <cite> for the customer's name
  • Style it to look like a card

🎯 Assignment 2: Article with Citations

Medium

Write a short paragraph about a movie or book.

  • Use <q> for a short quote from the work
  • Use <cite> for the title of the work
  • Combine text formatting tags (bold/italic) with quotes

🎯 Assignment 3: Footer Contact Section

Hard

Create a professional footer contact section.

  • Use <address> tag correctly
  • Include physical address with line breaks
  • Add email link using mailto:
  • Add phone link using tel:

🎓 Key Takeaways

  • Use <blockquote> for long quotes (indented blocks)
  • Use <q> for short inline quotes (adds quotation marks)
  • Use <cite> for titles of creative works
  • Use <address> for contact info of the author/owner
  • Proper quoting improves semantic meaning and accessibility