Web Development Course:
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:
|<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.
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:
<q>So many books, so little time.</q> - Frank Zappa
<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:
<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:
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.
HTML5 Tags List: Get to Know the Most Useful Elements
Find HTML5 tags explained and illustrated with beginner-friendly HTML5 examples. Grasp the difference between HTML5 tags & elements and learn to use both!
CSS Table Styling Properties and Techniques Explained
CSS table: how to use CSS table border property for your HTML table? Best way to design your HTML table. Learn CSS table design with examples.