</Marking-up Quotes in HTML. >

Marking-up Quotes in HTML with <q> and <blockquote>

The HTML <q> element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks;

<q> is also know as Inline Quotation element because it is a inline element

Source URL (cite attribute)

The cite attribute can be used to reference the URL of the quoted source:

         
<p>She wrote <q cite="http://example.com/blog/hello-world">The answer is 42.
</q> and everyone agreed.</p>

Try it Yourself

Note: that browsers typically don’t show this URL, so if the source is relevant, you should add a hyperlink (a element) in addition.

Block with <blockquote>

The blockquote element can be used for a (block-level) quote:

         
<blockquote>
  <p>The answer is 42.</p>
</blockquote>

Try it Yourself

Source URL (cite attribute) with <blockquote>

The cite attribute can be used to reference the URL of the quoted source:

         
<blockquote cite="http://example.com/blog/hello-world">
  <p>The answer is 42.</p>
</blockquote>

Try it Yourself

Note that browsers typically don’t show this URL, so if the source is relevant, you should add a hyperlink (a element) in addition (see the section Citation/Attribution about where to place this link)

Citation/Attribution

The citation/attribution should not be part of the blockquote element:

         
<blockquote cite="http://example.com/blog/hello-world">
  <p>The answer is 42.</p>
</blockquote>
<p>Source: <cite><a href="http://example.com/blog/hello-world" rel="external">Hello
World</a></cite></p>

Try it Yourself

You can add a div element to group the quote and the citation, but it exists no way to associate them semantically.
The Cite element can be used for the reference of the quoted source (but not for the author name).

The citation/attribution (e.g., the hyperlink giving the source URL) can be inside the blockquote, but in that case it must be within a cite element (for in-text attributions) or a footer element:

         
<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>

Try it Yourself

The cite element can be used for the reference of the quoted source, or for the name of the quote’s author.

HTML Marking-up Quotes

</Marking-up Quotes>