HTML Citation Formatting with `<cite>` Tag

Introduction

This lab will introduce you to the HTML <cite> tag, which is used to display a citation in a different format from normal text. In this lab, you will learn how to use the <cite> tag along with the <blockquote> tag to cite the author of a quotation in your HTML document.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Include the <cite> element

To use the <cite> element, it must be included in your HTML document. The necessary syntax for the same is given below:

<cite> ... </cite>

Add content inside the <cite> element

To display a citation, the content to be cited is embedded inside the <cite> tag.

<cite>The text to be cited</cite>

Use <blockquote> and <cite> elements together

To cite the author of a quotation, we use the <blockquote> tag along with the <cite> tag.

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

Note: The quoted text is wrapped in quotation marks and the author's name is wrapped in the <cite> tag.

Apply CSS to the <cite> tag

By default, the text inside the <cite> tag is italicized. We can also apply additional CSS styles to the <cite> tag to change the appearance of the citation. Here is an example:

<style>
  cite {
    color: blue;
    font-size: 1.2em;
  }
</style>

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

Summary

In this lab, we learned how to use the HTML <cite> tag to display a citation in a different format from normal text. We also learned how to use the <cite> tag along with the <blockquote> tag to cite the author of a quotation in our HTML document. Finally, we discussed how to apply CSS styles to the <cite> tag to change the appearance of the citation.