What are quote and blockquote in HTML?

Short Inline Quotations: The <q> Element

The <q> element is used to mark short quotations that appear within a sentence. Browsers are enclosing the text within the <q> element in language-specific quotation marks. For example, English quotes should be in double quotes (“”). Nested <q>elements should have alternating quotation marks (double on the outside, single on the inside for English). The lang attribute can be used to specify the language of the quote, which is supposed to influence the type of quotation marks used.

You can use the optional cite attribute with the <q> element to provide a URL to the source of the quotation. Unfortunately, browsers traditionally haven’t displayed the cite URL to users. It’s recommended that if you include the cite attribute, you should also repeat the URL in a link within your content for accessibility.

How to write a single quote in HTML?

<p>She wrote <q cite="http://example.com/source">The answer is 42.</q> and everyone agreed.</p>
<p>Every time I hear the word <q>soy</q>, I jump for joy.</p> <!-- Improper use as "soy" is not a quote from a source -->
<p>The short story began, <q>When she was a child, she would say, <q>Howdy, stranger!</q> to everyone she passed.</q></p> <!-- Nested q elements -->

She wrote The answer is 42. and everyone agreed.

Every time I hear the word soy, I jump for joy.

The short story began, When she was a child, she would say, Howdy, stranger! to everyone she passed.

The <q> element is invalid for quotes that extend beyond one paragraph.

What is blockquote in HTML?

The <blockquote> element is used to denote longer quotations that stand alone and are extracted on their own line by default. Browsers indent the text within the <blockquote> element by default. However, this element should not be used solely for dent; CSS should be used for styling purposes.

Like the <q> element, <blockquote> can also use the optional cite attribute to specify the URL of the source of the quote. Similar to <q>, browsers generally don’t display the cite attribute’s value. It is advisable to include the source URL within the content using a link.

Example:

<p>The blockquote element is used to denote longer quotations that stand alone and are extracted on their own line by default.</p><blockquote cite="http://www.marktwainbooks.edu/the-adventures-of-huckleberry-finn/">
  <p>We said there warn't no home like a raft, after all. Other places do seem so cramped up and smothery, but a raft don't. You feel mighty free and easy and comfortable on a raft.</p>
</blockquote>
<blockquote cite="http://example.com/blog/hello-world">
  <p>The answer is 42.</p>
  <footer>
    <p>Source: <cite><a href="http://example.com/blog/hello-world" rel="external">Hello World</a></cite></p>
  </footer>
</blockquote>

The blockquote element is used to denote longer quotations that stand alone and are extracted on their own line by default.

We said there warn’t no home like a raft, after all. Other places do seem so cramped up and smothery, but a raft don’t. You feel mighty free and easy and comfortable on a raft.

The answer is 42.
Source: Hello World

It’s recommended to enclose the text within <blockquote> tags in paragraph (<p>) or other semantically proper elements instead of placing text directly between the blockquote tags.

What is cite element in html5?

The <cite> element is used to cite the title of a work, such as a book, movie, article, or song. By default, browsers typically extract the text within the <cite> element in italics. All of these default styles can be dominated with CSS.

The <cite> element is a phrase tag. It can be used within a sentence to reference a work.

Examples of the <cite> element in html

<p>He enjoyed this selection from <cite>The Adventures of Huckleberry Finn</cite> by Mark Twain:</p>
<p>In the words of <cite>Charles Bukowski</cite> - <q>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.</q></p>
<p>This example is taken from <cite>HTML &amp; CSS: The Complete Reference</cite> a book by Thomas Powell.</p>

He enjoyed this selection from The Adventures of Huckleberry Finn by Mark Twain:

In the words of Charles Bukowski – An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.

This example is taken from HTML & CSS: The Complete Reference a book by Thomas Powell.

The <cite> element should be used for the reference of the quoted source or for the name of the quote’s author.

Use <q> for short, inline quotations. Be aware of unreliable browser support for automatic quotation marks. Use the cite attribute to link to the source, but consider also providing an in-content link.
Use <blockquote> for longer, block-level quotations. Browsers will typically indent this content. Use the cite attribute to link to the source and consider providing an in-content link. Enclose the quoted text within suitable block-level elements like <p>.
Use <cite> to mark up the title of a cited work. It is reduced in italics. You can use it within paragraphs or within the <footer> of a <blockquote> to attribute the source.

HTML5 Topics

Page Content

Tutorials