HTML Citations

Understanding HTML Citations

The HTML <cite> element represents the title of a creative work, such as a book, article, movie, song, painting, website, or other referenced work.

The <cite> element identifies the work being referenced rather than the quotation itself or the name of the person who created it. Browsers commonly display citation text in italics, although CSS can change its visual appearance.

HTML Citation Syntax

Place the title of the referenced creative work between the opening <cite> and closing </cite> tags.

<p>One well-known novel is <cite>Pride and Prejudice</cite>.</p>

The <cite> element gives the title semantic meaning instead of relying only on italic styling to distinguish it from the surrounding text.

Citing Creative Works

The <cite> element can identify the title of many types of creative works, including books, articles, essays, films, television programs, songs, paintings, sculptures, websites, and similar works.

<p>The novel <cite>Pride and Prejudice</cite> was written by Jane Austen.</p>

<p><cite>The Starry Night</cite> was painted by Vincent van Gogh.</p>

Use the element for the title of the work itself rather than simply for any text that you want displayed in italics.

<cite> Is Not for People's Names

In HTML, the <cite> element represents the title of a work, not the name of the person who created the work or said the quoted words.

<p><cite>Pride and Prejudice</cite> was written by Jane Austen.</p>

In this example, the book title belongs inside <cite>, while the author's name remains ordinary text.

Citations and Quotations

The <cite> element can be used alongside <blockquote> or <q> when a quotation refers to a titled work. Each element has a different purpose: quotation elements identify quoted content, while <cite> identifies the title of the referenced work.

<blockquote>
  <p>This is an example quotation from a published work.</p>
</blockquote>

<p>From <cite>Example Web Design Guide</cite>.</p>

Keeping these purposes separate gives both the quotation and its source title meaningful HTML structure.

HTML Citation Example

The following example demonstrates several ways the <cite> element can identify titles within ordinary text.

<p>Jane Austen wrote <cite>Pride and Prejudice</cite>.</p>

<p>Vincent van Gogh painted <cite>The Starry Night</cite>.</p>

<p>Read more in <cite>Example Web Design Guide</cite>.</p>

Try adding another title in the editor or removing the <cite> tags to compare the resulting markup and default browser presentation.

<cite> Element vs cite Attribute

The <cite> element and the cite attribute have related names but different purposes. The element identifies the title of a creative work in the visible content, while the attribute can provide a source URL for certain elements such as <blockquote> and <q>.

<blockquote cite="https://www.example-web.site/article.html">
  <p>This is a quotation from another source.</p>
</blockquote>

<p>From <cite>Example Web Design Guide</cite>.</p>

The cite attribute is not normally displayed to visitors, while content inside the <cite> element appears as part of the webpage.

Styling Citations with CSS

Browsers commonly display the <cite> element in italics by default. CSS can change that presentation without changing the meaning of the element.

cite {
  font-style: normal;
  font-weight: 600;
}

Use <cite> because the content represents the title of a work, and use CSS when you want to control how that title appears.

Citation Best Practices

• Use <cite> to identify the title of a creative work.
• Do not use <cite> simply to make text italic.
• Do not use <cite> for a person's name by itself.
• Use quotation elements to identify quoted text and <cite> to identify the title of the referenced work.
• Remember that the <cite> element and cite attribute serve different purposes.
• Use CSS to control the visual appearance of citation text.

Summary

The HTML <cite> element identifies the title of a creative work such as a book, article, film, song, painting, or website. It should not be confused with the cite attribute, which can provide a source URL for quoted content.