Code has been added to clipboard!

Quoting and Citing in HTML: Blockquote and Quote Elements

Reading time 2 min
Published Mar 19, 2019
Updated Sep 30, 2019

TL;DR – HTML blockquote and regular quote tags surround quotation text, preventing plagiarism. Citation tags refer to the title of the cited work.

Quoting and Citing in HTML

Quotation and citation are an important part of content writing on your website. To mark text passages that are cited or quoted, we use a few specific HTML elements:

Element Used for Defines
<q> Quotation An inline quote
<blockquote> Quotation A block-level quote
<cite> Quotation and citation The title of the quoted/cited work

When learning to write HTML quotation code, beginners often get confused about the difference between quotation and citation. It is actually very simple: quotation uses exact words from the author, and citation expresses their ideas using different words.

Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

HTML Quote Code: Elements to Use

The quotation you want to include in your text should be inserted inside <q> tags. They surround an inline quote in HTML quotation marks automatically:

Example
<q>So many books, so little time.</q> - Frank Zappa

The HTML <blockquote> element separates the quote in a different manner: it is displayed as a block element with indentations:

Example
<p>I am some normal text <blockquote>The blockquote starts here and ends here</blockquote> and here is some normal text again</p>

Note: HTML blockquotes are usually used for longer quotes.

The HTML <cite> element defines the title of the work you're citing or quoting. The content of these tags has no HTML quotation marks and is usually displayed in italics:

Example
<cite>Sophie's Choice</cite> by William Styron

HTML Blockquote: Summary

  • HTML <q> elements can be nested. Notice the single quotes HTML places around the nested element:
Example
He shrugged: <q>Well, as Winnie the Pooh once said, <q>I’m short and fat and proud of that!</q></q>
  • HTML blockquotes can also be useful in styling, as they help to break the flow of your web page and divide it into sections.
  • You can also use HTML blockquotes to emphasize pull quotes or testimonials.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 27/02/2021
3176 People Used
Only 97 Left
Rating
5.0