Citing Sources on the Web

Published on 9 Sep 2011 at 5:19 pm.
Filed under writing.

You are reading something that has been published on the World Wide Web. Recent trends have shortened this to simply “The Web”. The reason why it is referred to as The Web is because everything is connected via threads referred to as links. When you are talking about a topic it is very useful to link to a page that provides more information on a topic. But sometimes you need to extract content from the other page into your page to make your point, and for that you need to properly cite your sources. The WebÂ was designed to do this.

The World Wide Web Consortium (W3C), the standards body behind The Web, created five HTML tags that are especially useful when citing information. They are blockquote, q, cite, address, and meta. There are additional attributes that can be added to various tags that can not only enhance citation efforts, but can also enhance your Search Engine Optimization (SEO). A great example of this is the use of the rel attribute on links to support authorship markup.

Blockquote and q

The blockquote and q tags are the specifically aimed at quoting sources. Let’s look at the HTML spec for those tags.

These two elements designate quoted text. BLOCKQUOTE is for long quotations (block-level content) and Q is intended
for short quotations (inline content) that don’t require paragraph breaks.
This example formats an excerpt from “The Two Towers”, by J.R.R. Tolkien, as
a blockquote.
<BLOCKQUOTE cite="http://www.mycom.com/tolkien/twotowers.html">
They went in single file, running like hounds on a strong scent, and an eager light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.

Since I was quoting a large block of text I chose to mark up the above inside of a blockquote and used the cite attribute (not the cite HTML tag which I will get to in a moment). As you can see the default behavior for all browsers is to indent the text by a large amount. CSS can easily modify this to change the amount, set a different background color, maybe even add an image that has quotes on it. Unfortunately, many people get too caught up with the presentation aspect of designing a Web site with a WYSIWYG editor and just see a button that does indentation and use that element. I have seen people hit this two or three times, meaning really means they are pulling a quote that has been pulled from elsewhere which has itself been pulled from another source. Many modern WYSIWYG editors, like the one in SiteBrandBuilder, include both buttons for indent/outdent as well as blockquote to alleviate this issue, but the problem still exists.

As far as the q element goes, I have only ever seen it used by people that were trying to see how it worked. I have never seen anyone actually used by many people. Using the q element is useful because it is supposed to define a language neutral mechanism of providing a quote. The English language uses the apostrophe character to quote something, sometimes with right and left apostrophes. When translating for non-English users the browser would use another character that is appropriate for that language.

The q element has two main problems that prohibited it from wide-spread adoption. The first is that it was not properly supported by Internet Explorer until version 8. Prior to version 8 it was just rendered as standard text with no quotes around it. This required browser hacks just to use it properly, and for many people it was too much work for too little benefit. The second problem is that it is a knowledge issue. So with very few people knowing about it, and with those that do know that it had issues in the past â€” though they are smaller now since many IE users have updated beyond IE7 â€” many people have chosen to just ignore the element. It is possible for people who are refreshing their knowledge of HTML to come across this when studying HTML5 so it may yet see an upswing. Only time will tell.

Cite

The cite tag is used to used to markup a citation or a reference to another resource. The WC3 has a great example of how to use this in practice.

As Harry S. Truman said,
The buck stops here.

More information can be found in [ISO-0000].

Please refer to the following reference number in future
correspondence: 1-234-55

As you can see, this is a great element to use in conjunction with the q element.

Address

The address tag is perhaps the most misunderstood tag in HTML. It is not meant up physical mailing addresses as most people tend to use it. Let’s take a look at the right way.

The address element provides contact information for a document or part of a document. Information provided by address may include the names of the document’s maintainers, links to the maintainers’ Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on. The address element is not appropriate for all postal and e-mail addresses; it should be reserved for providing such information about the contact people for the document.

This element is great for use with a blog for example. If you look at the source for any of these blog posts you will see that the author’s links have been marked up with the address tag.