<cite>

Definition and Usage

The <cite> element establishes the title of a creative work such as a book, poem, song, movie, painting, sculpture, etc. It represents a reference to a cited work.

By default, browsers typically render the content of the <cite> element in italic text. The tag provides semantic meaning that helps search engines and assistive technologies understand that the content is a citation.

Default Rendering

Browsers typically display <cite> content in italic text by default, equivalent to this CSS:

cite {
  font-style: italic;
}

Attributes

The <cite> tag only supports HTML global attributes and event attributes.

Examples

Citing a Book Title

Reference to a book:

<p>
  My favorite book is <cite>To Kill a Mockingbird</cite>
  by Harper Lee.
</p>

Citing a Movie

Reference to a film:

<p>
  Last night I watched <cite>The Shawshank Redemption</cite>
  for the third time.
</p>

Citing a Song

Reference to a musical work:

<p>
  The song <cite>Bohemian Rhapsody</cite> by Queen
  is a masterpiece.
</p>

Citing an Article

Reference to a published article:

<p>
  According to the article
  <cite>The Future of Web Development</cite>,
  AI will play a major role in coding.
</p>

Citing an Artwork

Reference to a painting or sculpture:

<p>
  Leonardo da Vinci's <cite>Mona Lisa</cite>
  is displayed at the Louvre Museum.
</p>

Cite with Hyperlink

Making the citation clickable:

<p>
  Read more in
  <cite>
    <a href="https://example.com/article">
      Web Standards: A Complete Guide
    </a>
  </cite>
</p>

Cite within Blockquote

Proper attribution for quoted content:

<blockquote>
  <p>
    The only way to do great work is to love what you do.
  </p>
  <footer>
    — Steve Jobs, <cite>Stanford Commencement Speech</cite>
  </footer>
</blockquote>

Multiple Citations

Referencing multiple works:

<p>
  For more information, see
  <cite>HTML5 for Web Designers</cite>,
  <cite>CSS Secrets</cite>, and
  <cite>JavaScript: The Good Parts</cite>.
</p>

Styled Citation

Custom styling for citations:

<style>
  cite {
    font-style: italic;
    color: #745af2;
    font-weight: 500;
  }
</style>

<p>
  The research paper <cite>Machine Learning in Healthcare</cite>
  provides valuable insights.
</p>

Citation with Quote

Using <q> for inline quotes with citation:

<p>
  As mentioned in <cite>The Art of Programming</cite>:
  <q>Code is poetry written for machines.</q>
</p>

Bibliography Entry

Creating a bibliography or reference list:

<h3>References</h3>
<ul>
  <li>
    Author, A. (2024).
    <cite>Understanding Web Accessibility</cite>.
    Publisher Name.
  </li>
  <li>
    Smith, J. (2023).
    <cite>Modern CSS Techniques</cite>.
    Tech Press.
  </li>
</ul>

Try it Yourself

When to Use <cite>

Difference Between <cite>, <q>, and <blockquote>

CSS Styling for Citations

Common CSS properties for styling citations:

Accessibility and SEO Benefits

• Semantic meaning: The <cite> tag provides semantic information about the content type
• Screen readers: Assistive technologies can identify and announce citations appropriately
• Search engines: Search engines understand that the content is a title or reference
• Context: Helps distinguish between regular text and work titles
• Structured data: Can be used with schema.org markup for better SEO
• Content indexing: Improves how search engines index and categorize content
• User clarity: Makes it clear what content represents creative works

Best Practices

• Use for titles only: Only use <cite> for titles of works, not author names
• Combine with links: Wrap citations in <a> tags when linking to sources
• Use with quotes: Pair with <blockquote> or <q> for proper attribution
• Be consistent: Apply <cite> consistently throughout your content
• Don't overuse: Only use for actual creative work titles, not for emphasis
• Maintain styling: Keep default italic styling or apply consistent custom styles
• Provide context: Give enough surrounding text to make the citation meaningful
• Accessibility first: Ensure citations are clear even without visual styling

Common Use Cases

Related Tags

• <blockquote>

  Defines long block quotations

• <q>

  Defines short inline quotations

• <abbr>

  Defines abbreviations

• <em>

  Defines emphasized text