HTML and CSS Reference
In-Depth Information
Including Citations & Quotes
Writing online sometimes involves citing different sources or quotations. All of the differ-
ent citation and quotation cases can be covered semantically in HTML using the
<cite>
,
<q>
, and
<blockquote>
elements. Because they are usually distinguished from regular
text in appearance, we'll discuss them here in the typography lesson.
Knowing when to use which element and attribute to properly mark up citations and quotes
takes a bit of practice. In general, follow these rules:
•
<cite>
: Used to reference a creative work, author, or resource
•
<q>
: Used for short, inline quotations
•
<blockquote>
: Used for longer external quotations
Citing a Creative Work
The
<cite>
inline element is used in HTML to specifically cite a creative work; the ele-
ment must include either the title of the work, the author's name, or a URL reference to the
work. By default, content wrapped within the
<cite>
element will appear in italics within
the browser.
For additional reference, it helps to include a hyperlink to the original source of the citation
when relevant.
Here the topic
Steve Jobs,
by Walter Isaacson, is referenced within the
<cite>
element
(see
Figure 6.7
)
. Inside the citation is also a hyperlink to the topic.
1.
<p>The topic <cite><a href="http://www.amazon.com/Steve-Jobs-Walter-
Isaacson/dp/1451648537">Steve Jobs</a></cite> is truly inspiration-
al.</p>
Figure 6.7
A citation of the topic
Steve Jobs
using the <cite> element
Dialogue & Prose Quotation
Quite often, dialogue or prose is quoted inline, within other text. For this purpose, the
<q>
(or quote) inline element should be applied. The
<q>
element semantically indicates
quoted dialogue or prose and shouldn't be used for any other purposes.
Search WWH ::
Custom Search