Tip: Using cite in HTML

It’s true, cite can be confusing. It is an element and it can also be used as an attribute. Here’s what the W3C says:

Contains a citation or a reference to other sources.

What’s the proper semantic way to markup a citation of a book title or a magazine title? The answer is with the HTML cite element. The cite element causes the title to be rendered in italics.

How does that “reference to other sources” part work? Well, you use
cite as an attribute in those cases. Here are some examples that will make it easier to explain.

Cite: the element

Suppose you read this article in The New York Times. You want to refer to the name of the newspaper in a reference to the article. In other words, you want a citation for The New York Times. Here’s how to use cite as an element to create the citation.

<p>I read in <cite>The New York Times</cite> about Google selling ads for mobile phones.</p>

Cite: the attribute

Suppose you want to quote something from the article, perhaps as a blockquote? Here’s how to do that. It shows the use of both the cite element and the cite attribute.

<p>According to <cite>Google to Sell Web-Page Ads Visible on Mobile Phones</cite> in today’s <cite>New York Times</cite>, </p>

<blockquote cite=”http://www.nytimes.com/2007/09/18/technology/
18google.html?_r=1&ref=technology&oref=slogin”>The company said that its new product, AdSense for Mobile, would establish a cellphone advertising network in which Google would match ads with the content of mobile Web pages, much as it does online.</blockquote>

Note that the URL for the article source is given in a cite attribute in the blockquote. A cite can also be used as an attribute in other block level elements such as p.

Leave a Reply