<cite> - The Citation Element

The `<cite>` Element

Inline HTML 2.0

The citation element marks up the title of a creative work such as a book, article, essay, poem, song, film, TV show, game, sculpture, painting, or other cited work.

Quick Example

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

Result

Interactive code playground requires JavaScript. Here's the code:

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

Syntax

<cite>Title of Work</cite>

The <cite> element is typically rendered in italic by default, but its primary purpose is semantic, not stylistic.

What to Cite

Use <cite> for titles of:

Books, e-books, and chapters
Articles, blog posts, and essays
Research papers and white papers
Movies, TV shows, and videos
Songs, albums, and musical compositions
Paintings, sculptures, and artworks
Plays, operas, and performances
Video games and software
Websites and web applications
Poems and literary works

Common Use Cases

Books

<p>In <cite>1984</cite>, George Orwell depicts a dystopian future.</p>
<p>Have you read <cite>Pride and Prejudice</cite>?</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>In <cite>1984</cite>, George Orwell depicts a dystopian future.</p>
<p>Have you read <cite>Pride and Prejudice</cite>?</p>

Articles and Blog Posts

<p>According to the article <cite>The Future of Web Development</cite>, new frameworks are emerging rapidly.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>According to the article <cite>The Future of Web Development</cite>, new frameworks are emerging rapidly.</p>

Movies and TV Shows

<p>The movie <cite>The Shawshank Redemption</cite> is highly rated.</p>
<p>Have you watched <cite>Breaking Bad</cite>?</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The movie <cite>The Shawshank Redemption</cite> is highly rated.</p>
<p>Have you watched <cite>Breaking Bad</cite>?</p>

Music

<p>The song <cite>Bohemian Rhapsody</cite> by Queen is a masterpiece.</p>
<p>Her album <cite>25</cite> won multiple awards.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The song <cite>Bohemian Rhapsody</cite> by Queen is a masterpiece.</p>
<p>Her album <cite>25</cite> won multiple awards.</p>

With Blockquotes

<blockquote>
<p>It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p>
<footer>
  — Jane Austen, <cite>Pride and Prejudice</cite>
</footer>
</blockquote>

Result

Interactive code playground requires JavaScript. Here's the code:

<blockquote>
<p>It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.</p>
<footer>
  — Jane Austen, <cite>Pride and Prejudice</cite>
</footer>
</blockquote>

Research Papers

<p>The study <cite>Effects of Climate Change on Marine Ecosystems</cite> published in Nature provides compelling evidence.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The study <cite>Effects of Climate Change on Marine Ecosystems</cite> published in Nature provides compelling evidence.</p>

Artwork

<p>Leonardo da Vinci's <cite>Mona Lisa</cite> is displayed at the Louvre.</p>
<p>Picasso's <cite>Guernica</cite> depicts the horrors of war.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Leonardo da Vinci's <cite>Mona Lisa</cite> is displayed at the Louvre.</p>
<p>Picasso's <cite>Guernica</cite> depicts the horrors of war.</p>

Video Games

<p>The game <cite>The Legend of Zelda: Breath of the Wild</cite> won Game of the Year.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The game <cite>The Legend of Zelda: Breath of the Wild</cite> won Game of the Year.</p>

Websites

<p>You can find tutorials on <cite>MDN Web Docs</cite>.</p>
<p>The <cite>Stack Overflow</cite> community is very helpful.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>You can find tutorials on <cite>MDN Web Docs</cite>.</p>
<p>The <cite>Stack Overflow</cite> community is very helpful.</p>

What NOT to Cite

<!-- Don't use <cite> for people -->
<p><cite>Albert Einstein</cite> said...</p>

<!-- Just use plain text or <b> for names -->
<p>Albert Einstein said...</p>

Don’t Use for Quotations

Wrong
Right

<p><cite>"To be or not to be"</cite></p>

<!-- Use <q> or <blockquote> for quotations -->
<p><q>To be or not to be</q> from <cite>Hamlet</cite></p>

Styling

The default italic styling can be customized:

<style>
cite {
  font-style: normal;
  font-weight: 600;
  color: #0066cc;
}
cite:before { content: '"'; }
cite:after { content: '"'; }
</style>

<p>I just finished reading <cite>The Great Gatsby</cite>.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
cite {
  font-style: normal;
  font-weight: 600;
  color: #0066cc;
}
cite:before { content: '"'; }
cite:after { content: '"'; }
</style>

<p>I just finished reading <cite>The Great Gatsby</cite>.</p>

With Other Elements

Bibliography Entries

<ul>
<li>Orwell, George. <cite>Animal Farm</cite>. 1945.</li>
<li>Hemingway, Ernest. <cite>The Old Man and the Sea</cite>. 1952.</li>
<li>Fitzgerald, F. Scott. <cite>The Great Gatsby</cite>. 1925.</li>
</ul>

Result

Interactive code playground requires JavaScript. Here's the code:

<ul>
<li>Orwell, George. <cite>Animal Farm</cite>. 1945.</li>
<li>Hemingway, Ernest. <cite>The Old Man and the Sea</cite>. 1952.</li>
<li>Fitzgerald, F. Scott. <cite>The Great Gatsby</cite>. 1925.</li>
</ul>

With Links

<p>Read the article <a href="/article"><cite>Understanding HTML5 Semantics</cite></a> for more details.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Read the article <a href="/article"><cite>Understanding HTML5 Semantics</cite></a> for more details.</p>

In Footnotes

<article>
<p>The theory was first proposed in 1905.<sup><a href="#ref1">1</a></sup></p>
<footer>
  <p id="ref1">1. Einstein, Albert. <cite>On the Electrodynamics of Moving Bodies</cite>. 1905.</p>
</footer>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<p>The theory was first proposed in 1905.<sup><a href="#ref1">1</a></sup></p>
<footer>
  <p id="ref1">1. Einstein, Albert. <cite>On the Electrodynamics of Moving Bodies</cite>. 1905.</p>
</footer>
</article>

Accessibility

Screen readers typically don’t announce <cite> differently from regular text, but the semantic meaning helps users understand the content structure.

Combine with Other Semantic Elements

<blockquote>
  <p>The only way to do great work is to love what you do.</p>
  <footer>
    <cite>Steve Jobs</cite> <!-- Wrong: Jobs is a person, not a work -->
  </footer>
</blockquote>

<!-- Better: -->
<blockquote>
  <p>The only way to do great work is to love what you do.</p>
  <footer>
    — Steve Jobs
  </footer>
</blockquote>

Clear Context

Provide context so users understand what the citation refers to:

Unclear
Clear

<p>In <cite>Nature</cite>, the study showed...</p>

<p>In the journal <cite>Nature</cite>, the study showed...</p>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <cite> element has been supported since the earliest browsers.

For inline quotations from cited works. Learn more →

For longer quotations from cited works. Learn more →

For abbreviating journal or publication names. Learn more →

<cite> - The Citation Element

The <cite> Element

Quick Example

Syntax

What to Cite

Common Use Cases

Books

Articles and Blog Posts

Movies and TV Shows

Music

With Blockquotes

Research Papers

Artwork

Video Games

Websites

What NOT to Cite

Don’t Use for People

Don’t Use for Quotations

Styling

With Other Elements

Bibliography Entries

With Links

In Footnotes

Accessibility

Screen Reader Behavior

Combine with Other Semantic Elements

Clear Context

Browser Support

Related Elements

Specifications

The `<cite>` Element