Using <cite> for a paraphrased quote

<p>According to <a href="http://www.AuthoringHTML.com/"><cite>Authoring HTML</cite></a>,
   the &lt;cite&gt; tag should be used for the <em>title</em> of a creative work,
   <em>not</em> the cited content.</p>

<cite> with <q> tag for a short quote

<p>Per <a href="http://www.HTML-5.com/css/css-styles/#html-color-picker">
   <cite>HTML Color Picker</cite></a>,
   <q cite="http://www.HTML-5.com/css/css-styles/#html-color-picker">In a browser
   that does not yet support the HTML <input type="range"/> for a slider bar control,
   [HTML slider bar] controls will appear as text input fields.</q></p>

Note that the content of the cite element is the title of the source of the quotation, while the value of the <q cite> attribute is a URL or other URI reference. The same URL is used in the <a href> attribute, the target of the link which will be visible, and the <q cite> attribute, which will not be displayed.

<cite> with <blockquote> tag for a long quote

<p>One of my favorite quotes from <span style="white-space: nowrap">
   <a href="http://www.Shakespeare-Literature.com/Twelfth_Night/10.html">
      <cite>William Shakespeare <wbr/>Twelfth Night <wbr/>Act II Scene 5</cite></a>:</span>
</p>
<blockquote
   cite="http://www.Shakespeare-Literature.com/Twelfth_Night/10.html"
>In my stars I am above thee; but be not afraid of greatness:
   some are born great, some achieve greatness,
   and some have greatness thrust upon 'em.
</blockquote>

The <span style="white-space: nowrap"> prevents the cited title text from breaking in inappropriate places and the <wbr/> tags indicate where line breaks should be placed. The same URL is used in the <a href> attribute, the target of the link which will be visible, and the <blockquote cite> attribute, which will not be displayed.