Practical Applications
The internet is notorious for copyright issues and not giving credit where it's due. So, if you are using information from another source, it's important to indicate that the material is indeed quoted directly or paraphrased from somewhere else. Conveniently, there are tags that specifically handle tasks related to this issue.
When referencing the title of a longer work, such as a book or movie, you may already know that you italicize it. So, in web design, it would technically be acceptable to use the <i> tag around a title. However, the <cite> tag is a 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, an internet username, or even a website's URL.
Example
Titanic won the Academy Award for Best Picture in 1998.
<p><cite>Titanic</cite> won the Academy Award for
Best Picture in 1998.</p>
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 tag use is focused on semantics. Using the <q> tag differentiates a quotation from other text that may have quotation marks for other reasons.
Example
As Yoda put it, Do or do not. There is no 'try.'
<p>As Yoda put it, <q>Do or do not. There is no 'try.'</q></p>
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 in HTML5 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.
Example
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.
<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>
You Try!
We've covered a lot! Use the practice coding space below or your own text editor to practice the tags we've learned. Below is a table that outlines all the tags we've covered, as well as a few we haven't. (Try them out and see what they do!)
This course covers the basics of web design, but there is always more to learn. You can perform a web search for any of the new tags listed below to learn more about them.
| <h1><h1/> | <h2><h2/> | <h3><h3/> | <h4><h4/> |
| <h5><h5/> | <h6><h6/> | <p><p/> | <strong><strong/> |
| <em><em/> | <i><i/> | <b><b/> | <cite><cite/> |
| <q><q/> | <blockquote></blockquote/> | <footer><footer/> | <small><small/> |
| <del><del/> | <mark><mark/> | <sub><sub/> | <sup><sup/> |
