<p>This paragraph follows the <q>practice what you preach</q> principle. The double quotation
marks around the quotation in the previous sentence are created by the browser interpreting
the &lt;q&gt; tag rather than by actual double quotation marks in the HTML code.</p>

The < and > character entities on the last line escapes that instance of the <q> tag so that it appears literally in that sentence rather than as the HTML code for a start tag with no matching end tag.

The cite attribute provides a link to the source of the quotation. The HTML 5 specification says that User agents should allow users to follow such citation links using the URL in the cite attribute. At this point, however, none of the browsers actually do..

<q> with <cite> tag for quote citation

<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. In this case, an <a href> tag is used to create a link to the source of the quotation. 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.