HTML Quotations and Citations

Mark up quotes, sources, abbreviations and contact details with the right HTML elements so browsers, search engines and screen readers understand them.

Lesson 9 of 44Beginner15 min read

Web pages quote people all the time: a customer review on a shop page, a line from a speech in a news article, a famous saying in a blog post. HTML has dedicated quotation elements for this, so the meaning of the text is part of the page itself, not just its look.

Using the right element matters for three reasons. Browsers apply sensible default styling, such as indenting a long quote or adding quotation marks around a short one. Screen readers can announce a quotation as a quotation. And search engines get a clearer picture of what on your page is your own writing and what is quoted from somewhere else.

In this lesson you'll learn the five elements that belong together: <blockquote> for long quotes, <q> for short inline quotes, <cite> for the title of a work, <abbr> for abbreviations and acronyms, and <address> for contact information. They are small, easy to learn, and they make your HTML noticeably more professional.

Long quotes with blockquote

<blockquote> holds a quotation that stands on its own, usually a paragraph or more:

HTML
<blockquote cite="https://example.com/speech">
  <p>The best way to predict the future is to invent it.</p>
</blockquote>
  • Browsers indent blockquotes by default. You can restyle them freely with CSS.
  • The optional cite attribute holds the URL of the source. It isn't shown on the page, but it records where the quote came from.
  • To show the source to readers, add a visible line below, often inside a <figure> with a <figcaption>.
  • A blockquote can contain several paragraphs, lists or other block content.

Short quotes with q

<q> is for a short quotation inside a sentence:

HTML
<p>As the saying goes, <q>practice makes progress</q>.</p>

The browser adds the correct quotation marks automatically, and it even uses the right style of marks for the page's language, set with the lang attribute on <html>. Don't type your own quotation marks around <q>, or you'll get two pairs.

cite, abbr and address

  • <cite> marks the title of a creative work: a book, film, song, article or website. Browsers show it in italics. It isn't for the name of a person.
  • <abbr> marks an abbreviation or acronym. Put the full form in the title attribute: <abbr title="HyperText Markup Language">HTML</abbr>. Many browsers show a dotted underline and a tooltip. For accessibility, it's best to also write the full form in the text the first time you use it.
  • <address> holds contact information for the author or owner of a page or article: an email link, a phone number, a postal address or social links. It's often placed inside a <footer>. It isn't meant for any random address mentioned in the text.

HTML Quotations Syntax

Quotation elements

<blockquote cite="https://source.example">
  <p>A long quotation.</p>
</blockquote>
<p>She said <q>see you soon</q>.</p>
<p>My favourite book is <cite>The Hobbit</cite>.</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> styles web pages.</p>
<address>Email: <a href="mailto:hello@example.com">hello@example.com</a></address>

HTML Quotations Summary

  • <blockquote> is for long quotations; its cite attribute stores the source URL.
  • <q> is for short inline quotes, and the browser adds quotation marks for you.
  • <cite> marks the title of a work, such as a book or film.
  • <abbr title="..."> explains abbreviations and acronyms.
  • <address> holds contact details for the author or owner of the page.

HTML Quotations Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A customer review with its source

<figure>
  <blockquote cite="https://example.com/reviews/1042">
    <p>The lamp arrived in two days and lights my whole desk. Great value for money.</p>
  </blockquote>
  <figcaption>Priya, verified buyer, on <cite>Codevra Shop Reviews</cite></figcaption>
</figure>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 1<figure> groups the quote with its caption.
  2. Line 2cite stores the URL of the original review without showing it.
  3. Line 3Quotes can hold one or more paragraphs.
  4. Line 5The caption names the person and the source, with the site name marked up as a title.
Example 2

Inline quotes and abbreviations

<p>
  The <abbr title="World Wide Web Consortium">W3C</abbr> says the web should be
  <q>accessible to everyone, whatever their ability</q>.
</p>
<p>
  We first read about it in <cite>Weaving the Web</cite>, a book by Tim Berners-Lee.
</p>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2Hover over W3C to see the full name in a tooltip.
  2. Line 3<q> adds the quotation marks for you, matching the page's language.
  3. Line 6<cite> marks the book title, shown in italics.
Example 3

Contact details in a footer

<article>
  <h2>How we pack your order</h2>
  <p>Every parcel is packed by hand and checked twice.</p>
  <footer>
    <p>Written by the Codevra Shop team.</p>
    <address>
      Questions? Email <a href="mailto:support@example.com">support@example.com</a><br>
      or call <a href="tel:+441130000000">0113 000 0000</a>.
    </address>
  </footer>
</article>
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 4The article's footer holds information about the article.
  2. Lines 6 to 9<address> holds contact details for the people responsible for the content.
  3. Lines 7 to 8mailto: and tel: links open email or start a phone call.

Common HTML Quotations Mistakes

Typing quotation marks around q

Don't
<p>He said <q>"hello"</q>.</p>
Do
<p>He said <q>hello</q>.</p>

The browser already adds the marks, so the wrong version shows them twice.

Using cite for a person's name

Don't
<p><cite>Ada Lovelace</cite> wrote the first program.</p>
Do
<p>Ada Lovelace wrote <cite>Notes on the Analytical Engine</cite>.</p>

<cite> is for titles of works, not for people.

Using blockquote just to indent text

Don't
<blockquote><p>Our opening hours are 9 to 5.</p></blockquote>
Do
<p class="note">Our opening hours are 9 to 5.</p>

If it isn't a quotation, indent it with CSS such as margin-left instead.

HTML Quotations in Real Projects

Where you'll see these elements

Review sections on product pages, testimonials on landing pages, quotes from experts in news and blog articles, pull quotes in magazines and the "Contact us" block in page footers. Content systems such as WordPress output <blockquote> when writers use the quote block, so knowing the element helps you style it.

HTML Quotations Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Complete the markup so the quote is a short inline quotation.

<p>The sign said <>mind the gap</>.</p>
Multiple choiceeasy

Which element is used for a long quotation that stands on its own?

Multiple choicemedium

Where does the full meaning of an abbreviation go?

Multiple choicemedium

What is <cite> meant for?

Fix the bugmedium

Fix the markup: the long review should be a block quotation, and the short quote inside the sentence should use <q> without typed quotation marks.

<p>
  The best thing about this course is how practical it is. Every lesson has something to build.
</p>
<p>Sam told us: "worth every minute".</p>
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • The review is inside a blockquote
  • The short quote uses q
  • No typed quotation marks around the quote

HTML Quotations Quiz

5 questions to check what you learned.

  1. Does the browser add quotation marks around <q> automatically?

    • Yes
    • No
    • Only with CSS
    • Only in English

  2. What does the cite attribute on <blockquote> hold?

    • The author's name
    • The date
    • The URL of the source
    • A visible caption

  3. Which element suits an author's email and phone number at the end of an article?

    • footer only
    • address
    • contact
    • cite

  4. How do browsers usually show <abbr title="...">?

    • With a dotted underline and a tooltip on hover
    • In bold
    • In capitals
    • They hide it

  5. Why use quotation elements instead of italics or indentation?

    • They load faster
    • CSS can't style plain paragraphs
    • They are required by HTML5
    • They describe what the content is, which helps screen readers and search engines

HTML Quotations Challenge

A testimonial card

Build a testimonial:

  1. A <figure> containing a <blockquote> with at least one <p>
  2. A <figcaption> that includes the person's name
  3. Somewhere in the text, an <abbr> with a title attribute
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • A figure contains a blockquote with a paragraph
  • There is a figcaption
  • An abbr has a title

Related HTML topics

08Text FormattingBold, italic, highlighted, deleted and code text, chosen for meaning.07Paragraphs & BreaksParagraphs, line breaks, dividers and how HTML handles spaces.26Semantic ElementsStructure pages with elements that describe what each part is.
Esc
↑↓ to navigateEnter to open