Text & Formatting›Extra· 25 min read

Quotations & Citations

Tags for quoting people and sources properly: blockquote, q, abbr, cite, address and more.

What you will learn

Display quotations with <blockquote> and <q>
Mark up abbreviations, citations and addresses

Quotations

Use <blockquote> for a long, block-level quote, and <q> for a short inline quote (the browser adds quotation marks for you).

<blockquote cite="https://example.com">
  The best way to learn to code is to build things.
</blockquote>
<p>As our trainer says, <q>practice beats theory</q> every time.</p>

Live preview

The <blockquote> becomes its own indented block — the browser pushes it in from the margin so it stands apart as a quoted passage. The <q> stays inside the sentence and the browser automatically wraps quotation marks around “practice beats theory” for you. The cite attribute just records where the quote came from (it is not shown on the page).

Note: Output: The best way to learn to code is to build things. (indented block quote) As our trainer says, “practice beats theory” every time. (quote marks added automatically)

Abbreviations, citations & addresses

Tag	Use for
`<abbr>`	An abbreviation — add `title` for the full form (hover to see it)
`<cite>`	The title of a work (a book, film, song)
`<address>`	Contact details for the author/owner
`<bdo>`	Override text direction (e.g. right-to-left)

abbr, cite and address

<p><abbr title="HyperText Markup Language">HTML</abbr> is fun.</p>
<p>My favourite book is <cite>The Pragmatic Programmer</cite>.</p>
<address>
  CodingClave, Bengaluru<br>
  Email: hello@codingclave.com
</address>

Live preview

Three different jobs here: <abbr title="..."> marks “HTML” as an abbreviation and reveals the full form when you hover; <cite> marks the book title (browsers usually show it in italics); and <address> groups contact details (browsers usually italicise it too). The <br> inside the address just breaks the line.

Note: Output: HTML is fun. (hovering over “HTML” shows the tooltip “HyperText Markup Language”) My favourite book is The Pragmatic Programmer. (title in italics) CodingClave, Bengaluru Email: hello@codingclave.com (the address block, usually italic)

Q. Which tag adds quotation marks automatically for a short inline quote?

Answer: <q> is for short inline quotes and the browser adds the quotation marks. <blockquote> is for longer block quotes.

✍️ Practice

Display your favourite quote with <blockquote> and name the author with <cite>.
Write a paragraph using two abbreviations marked up with <abbr> and helpful titles.

🏠 Homework

Create an <address> block for an imaginary business with name, email and phone.