<cite> Tag Examples
Examples of the cite
tag in HTML 5
Using the <cite> tag for the source of a citation
(see <cite> tag demo above)
Using <cite> for a paraphrased quote
<p>According to <a href="http://www.AuthoringHTML.com/"><cite>Authoring HTML</cite></a>, the <cite> 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.