<cite>-citation source

The <cite> tag in HTML is used to mark the title of a work or the source of a citation, typically indicating references to creative content such as books, articles, movies, music, etc. It does not automatically add quotation marks or italic styling, but its appearance can be customized using CSS.

Basic Usage of the <cite> Tag

<cite> is an inline element used to wrap the source of referenced content. For example, when citing a book or an article, it can be used to label the author or the title of the work:

<p>My favorite novel is <cite>《The Three-Body Problem》</cite>, written by Liu Cixin.</p>

By default, browsers render the content inside <cite> in italics, but the actual appearance may vary across browsers. You can modify the styling with CSS:

cite {
  font-style: normal;
  color: #666;
}

Using <cite> with <blockquote>

<cite> is often used alongside <blockquote> (a block-level quotation) to clearly indicate the source of the citation. For example:

<blockquote>
  <p>Stay hungry, stay foolish.</p>
  <footer>— <cite>Steve Jobs</cite>, Stanford Commencement Speech (2005)</footer>
</blockquote>

In this example, <cite> is used to label the source (Steve Jobs), while <footer> provides additional contextual information.

Semantic Role of <cite>

HTML5 emphasizes semantics, and the purpose of <cite> is not just stylistic italics but also to clearly define the relationship of the referenced content. For example:

<p>In <cite>《Professional JavaScript for Web Developers》</cite>, the author explains the concept of closures in detail.</p>

Search engines and screen readers recognize <cite>, helping them better understand the page structure.

Common Mistakes and Notes

1. Do Not Use <cite> for Author Names
   While some older examples might do this, the HTML5 specification explicitly states that <cite> should be used for work titles, not personal names:

   <!-- Not recommended -->
   <p>This quote is from <cite>Lu Xun</cite>.</p>
   
   <!-- Recommended -->
   <p>This quote is from Lu Xun's <cite>《A Madman's Diary》</cite>.</p>
   

2. Avoid Nesting Interactive Elements
   <cite> is an inline element and should not wrap interactive content like buttons or links:

   <!-- Incorrect example -->
   <cite><a href="#">Click to view source</a></cite>
   

Practical Examples

Example 1: Citing a Movie

<p>My favorite movie is <cite>《The Shawshank Redemption》</cite>, which tells a story of hope and freedom.</p>

Example 2: Academic Citation

<p>According to <cite>《The Future of Artificial Intelligence》</cite> (author: Kai-Fu Lee), AI will profoundly change society.</p>

Example 3: Music Album

<p>The album <cite>《The Dark Side of the Moon》</cite> is one of Pink Floyd's masterpieces.</p>

Comparison with Other Tags

• <q>: Used for short inline quotes, automatically adds quotation marks.
• <blockquote>: Used for long block quotations, indented by default.
• <cite>: Only labels the source, not the quoted content itself.

For example:

<blockquote>
  <p>To be or not to be, that is the question.</p>
  <footer>— <cite>William Shakespeare</cite>, <cite>《Hamlet》</cite></footer>
</blockquote>

Browser Compatibility and Styling

All modern browsers support <cite>, but default styling may vary. You can standardize the appearance with CSS:

cite {
  font-style: italic;
  font-family: Georgia, serif;
  color: #333;
}

For more advanced styling, you can use ::before and ::after pseudo-elements:

cite::before {
  content: "“";
}

cite::after {
  content: "”";
}

Advanced Usage: Combining with Microdata

<cite> can be paired with Schema.org microdata to enhance SEO:

<p>
  This quote is from
  <span itemscope itemtype="https://schema.org/Book">
    <cite itemprop="name">《Sapiens: A Brief History of Humankind》</cite>
  </span>,
  written by <span itemprop="author">Yuval Noah Harari</span>.
</p>