7 of 9

Referencing

Citing other people’s work? We have tags for that, too!

The internet is notorious for copyright issues and not giving credit where it’s due. So if you are using direct information from another source, it’s important to indicate that the material is indeed quoted. Conveniently, there are tags that specifically handle tasks related to this issue.

When referencing the title of an established work, such as a book, poem, song or movie, you may already know that you would italicize it. So, in web design, it would technically be acceptable to use the <i> tag around a title. However, the <cite> tag is the more appropriate tag for this purpose. The <cite> tag can also be used to identify the source of a quotation, whether that be a person’s name or internet username, or even a website’s URL.

<p><cite>Titanic</cite> won the Academy Award for Best Picture in 1998.</p>

Titanic won the Academy Award for Best Picture in 1998.

As for actual quoted material, there are two tags to choose from. If you are using a quotation inline with other text, you use the <q> tag. This tag’s default behavior is to place quotation marks around the text content. Sure, you can manually add quotation marks, but this is another situation where its use is focused on semantics. Using the <q> tag differentiates a quotation from other text that may have quotation marks for other reasons.

<p>As Yoda put it, <q>Do, or do not. There is no 'try'.</q></p>

As Yoda put it, Do, or do not. There is no 'try'.

If you want your quotation to stand on its own, then you use the <blockquote> tag. The <blockquote> tag doesn’t add quotation marks, but rather indents the content to block it off as quoted material. If your <blockquote> is just a pull quotation from your own material, citation isn’t necessary. However, if content in a <blockquote> is an excerpt from another source, its source should be noted. A handy way to do this as of HTML5—though not required—is the <footer> tag.  The <footer> tag serves as the end, or foot, of a page or section, so it’s a perfect place to credit a quotation.

<blockquote>We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.
<footer>—Excerpt from The Declaration of Independence</footer>
</blockquote>
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.
—Excerpt from The Declaration of Independence