Quotations & Citations

Web pages quote people all the time: a customer review, a line from a poem, a sentence from a news report. HTML has elements that say "these words come from someone else", and elements that name where they came from.

In this lesson you will learn to mark up long and short quotations, add a visible credit for the speaker, and name the titles of books, films and other works.

Long quotations with blockquote

Use <blockquote> for a quotation that stands on its own as a block, usually one or more full sentences or paragraphs. Browsers indent it by default so it stands apart from your own text.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Blockquote</title>
</head>
<body>
  <h1>Poem of the week</h1>
  <p>This week our Class 8 students are learning a famous poem by Rabindranath Tagore. It begins:</p>
  <blockquote>
    <p>Where the mind is without fear and the head is held high;<br>
    Where knowledge is free;</p>
  </blockquote>
  <p>Discuss in class: what does a mind "without fear" mean to you?</p>
</body>
</html>

The content of a <blockquote> is normal block content, so put the quoted text inside <p> elements. Here <br> is used because the line breaks are part of the poem.

If the quotation comes from a page on the web, you can add a cite attribute with its address: <blockquote cite="https://example.com/source">. Browsers do not show this address, but it records the source in the code for tools and scripts.

Giving credit with figure and figcaption

A quotation usually needs a visible credit: who said it, and where. The HTML standard says this credit must sit outside the <blockquote>, because it is not part of the quoted words. The clean way to keep the quote and its credit together is a <figure> with a <figcaption>.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Customer reviews</title>
  <style>
    figure { margin: 1em 0; padding: 1em; background: #f4f7fb; border-left: 4px solid #3b82f6; }
    blockquote { margin: 0; font-size: 1.1rem; }
    figcaption { margin-top: 0.5em; color: #555; }
  </style>
</head>
<body>
  <h1>What our students say</h1>
  <figure>
    <blockquote>
      <p>The weekend batch let me learn while keeping my job. I built my first website in six weeks.</p>
    </blockquote>
    <figcaption>Farhan Qureshi, accountant from Lucknow</figcaption>
  </figure>
  <figure>
    <blockquote>
      <p>The teachers explained every mistake patiently. I finally understand how pages are built.</p>
    </blockquote>
    <figcaption>Meera Nair, Class 12 student, Kochi</figcaption>
  </figure>
</body>
</html>

<figure> groups content that is referred to as a unit, and <figcaption> is its caption. You will meet the same pair again for images in HTML Images.

Short quotations with q

For a short quote inside a sentence, use the inline <q> element. The browser adds the quotation marks for you, so do not type your own.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline quotes</title>
</head>
<body>
  <p>When I asked about the delay, the station master said <q>the train is running forty minutes late</q> and went back to his tea.</p>
  <p>My grandmother's advice was simple: <q>eat on time, sleep on time</q>.</p>
</body>
</html>

If you type quotation marks yourself as well, the page shows two sets. Choose one approach: plain typed marks if the quote is not important to mark up, or <q> with no typed marks.

Naming a work with the cite element

The <cite> element marks the title of a creative work: a book, a film, a song, a poem, a newspaper article, a painting, a TV series or a game. Browsers show it in italics by default.

<p>Tagore's collection <cite>Gitanjali</cite> was published in English in 1912.</p>
<p>We watched <cite>Lagaan</cite> on cricket day at school.</p>
<p>The report appeared in <cite>The Hindu</cite> last Sunday.</p>

One rule surprises many people: the HTML standard says <cite> is for the title of the work, not for a person's name. To credit a person, write their name as plain text, for example in a <figcaption>.

The cite element and the cite attribute

The two share a name but do different jobs.

You can use both together. Here the full credit sits in the caption, with the title of the book marked by <cite>:

<figure>
  <blockquote cite="https://example.com/books/gitanjali">
    <p>Where the mind is without fear and the head is held high;</p>
  </blockquote>
  <figcaption>Rabindranath Tagore, <cite>Gitanjali</cite></figcaption>
</figure>

Quotes in other languages

If a quotation is in a different language from the rest of the page, add lang to the <blockquote> or <q>. This helps screen readers switch pronunciation, as you learned in HTML Attributes.

<p>The banner at the station read <q lang="hi">आपकी यात्रा मंगलमय हो</q>, wishing travellers a happy journey.</p>

Common mistakes

• Using <blockquote> to indent text. It means "this is a quotation". For indentation, use CSS margin or padding.
• Putting the credit inside the blockquote. The speaker's name is not part of the quoted words. Use <figcaption> or a paragraph after the quote.
• Typing quotation marks around <q>. The browser already adds them, so you get double marks.
• Wrapping a person's name in <cite>. Use <cite> only for the title of a work.
• Expecting the cite attribute to show a link. It is invisible; add a normal link if readers should be able to visit the source.

Key points

• <blockquote> is for long quotations that form their own block; put the text inside <p> elements.
• <q> is for short inline quotations; the browser adds the quotation marks.
• Put the credit outside the quote, ideally in a <figure> with a <figcaption>.
• The <cite> element marks the title of a work, not a person's name.
• The cite attribute stores the source address and is not shown to readers.
• Add lang to quotations in another language.

<figure>
  <blockquote>
    <p>Where knowledge is free;</p>
  </blockquote>
  <figcaption>Rabindranath Tagore, <cite>Gitanjali</cite></figcaption>
</figure>
<p>Our principal added, <q>knowledge grows when you share it</q>, at the morning assembly.</p>