HTML Quotations

HTML provides specific elements for quoting content. These elements help distinguish quoted text from your own content and provide semantic meaning for screen readers and search engines.

The <q> Element

The <q> element is used for short inline quotations. Browsers typically add quotation marks around the content.

<p>As Shakespeare famously wrote, <q>To be or not to be, that is the question</q>.</p>
<p>The professor said, <q>Knowledge is power</q> during the lecture.</p>
<p>My grandmother always told me, <q>Honesty is the best policy</q>.</p>

The <blockquote> Element

The <blockquote> element is used for longer quotations that span multiple lines or paragraphs. It's typically displayed as an indented block.

<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. As with all matters of the heart, you'll know when you find it.</p>
</blockquote>

<blockquote>
  <p>In the middle of difficulty lies opportunity.</p>
  <p>Life is what happens when you're busy making other plans.</p>
</blockquote>

The cite Attribute

The cite attribute can be used with both <q> and <blockquote> to specify the source URL of the quotation:

<q cite="https://www.example.com/shakespeare">To be or not to be</q>

<blockquote cite="https://www.example.com/quotes">
  <p>The only way to do great work is to love what you do.</p>
</blockquote>

Note: The cite attribute doesn't display anything visible to users - it's primarily for machine-readable data.

The <cite> Element

The <cite> element is used to mark the title of a creative work (book, song, movie, painting, etc.). It should not be used for people's names.

<p>I love reading <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
<p>The song <cite>Bohemian Rhapsody</cite> was written by Freddie Mercury.</p>
<p>The movie <cite>The Shawshank Redemption</cite> is a classic.</p>
<p>According to <cite>The HTML Specification</cite>, this is the correct usage.</p>

Quotation with Attribution

Combine blockquotes with citations to properly attribute quotes:

<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>
  <footer>
    <cite>Steve Jobs</cite>
  </footer>
</blockquote>

<blockquote>
  <p>Be yourself; everyone else is already taken.</p>
  <footer>
    <cite>Oscar Wilde</cite>
  </footer>
</blockquote>

Nested Quotations

You can nest quotations within quotations:

<blockquote>
  <p>The teacher explained, <q>As Shakespeare wrote, <q>All the world's a stage</q>, and we must play our parts well.</q></p>
  <footer>
    <cite>Classroom Discussion</cite>
  </footer>
</blockquote>

Literary Quotes

<blockquote>
  <p>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness...</p>
  <footer>
    From <cite>A Tale of Two Cities </cite> by Charles Dickens
  </footer>
</blockquote>

Technical Quotes

<blockquote>
  <p>Any sufficiently advanced technology is indistinguishable from magic.</p>
  <footer>
    <cite>Arthur C. Clarke</cite>
  </footer>
</blockquote>

Business Quotes

<blockquote>
  <p>Your time is limited, so don't waste it living someone else's life.</p>
  <footer>
    <cite>Steve Jobs</cite>, Stanford Commencement Address 2005
  </footer>
</blockquote>

Quotation Best Practices