HTML <cite> Tag
The HTML <cite> tag marks the title of a creative work, such as a book, film, or song. Learn its usage, attributes, and examples.
The <cite> tag marks up the title of a creative work — a book, paper, song, film, painting, sculpture, television program, website, and so on. It is an inline (text-level) semantic element: it tells the browser and assistive technology that the enclosed text is a referenced work, not ordinary text.
Use the <blockquote> element for long quotations and the <q> element for short, inline ones.
The <cite> element vs. the cite attribute
These two are easy to confuse because they share a name, but they do different jobs:
- The
<cite>element wraps the title of a work as text on the page (for example,<cite>The Lord of the Rings</cite>). It is visible to readers. - The
citeattribute is a separate thing — it takes a URL that points to the source of a quotation, and it lives on the<blockquote>and<q>elements (for example,<blockquote cite="https://example.com/source">). It is metadata; most browsers do not display it.
In short: the element names the work, the attribute links to the source URL.
Should <cite> include the author's name?
The specifications disagree slightly. The older W3C HTML 5.2 specification allows a citation to include the author's name. The current WHATWG HTML Living Standard says <cite> should contain only the title of the work, not the author's name.
In practice, follow the WHATWG guidance: put the title inside <cite> and write the author's name as plain text outside it.
<p><cite>Pride and Prejudice</cite> was written by Jane Austen.</p>Syntax
The <cite> tag comes in pairs. The content is written between the opening <cite> and closing </cite> tags.
Example of the HTML <cite> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Michelangelo sculpted <cite>David</cite> between 1501 and 1504.</p>
</body>
</html>Combining <cite> with a quotation
A common, complete pattern is to quote a source with <blockquote> (using its cite attribute for the source URL) and name the work with the <cite> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<blockquote cite="https://www.gutenberg.org/ebooks/2701">
<p>Call me Ishmael.</p>
</blockquote>
<p>— from <cite>Moby-Dick</cite> by Herman Melville</p>
</body>
</html>The same idea works inline with <q>:
<p>
As the narrator says in
<cite>Moby-Dick</cite>:
<q cite="https://www.gutenberg.org/ebooks/2701">Call me Ishmael.</q>
</p>Accessibility
<cite> carries semantic meaning: it identifies the title of a referenced work so that screen readers and other tools can recognize it. Don't reach for <i> or a CSS font-style: italic rule just to slant a title — the italic look is presentational, while <cite> conveys what the text is. The meaning is the point; the styling is secondary and can be changed freely.
Attributes
The <cite> element has no element-specific attributes. It supports the Global Attributes and the Event Attributes.
Note that <cite> does not support href. To link a title to its source, wrap the <cite> inside an <a> element:
<p>According to <cite><a href="https://example.com/source">The Art of Sculpting</a></cite>, Michelangelo...</p>Styling <cite>
By default, browsers render <cite> text in italics. You can change this with the CSS font-style property:
cite {
font-style: normal;
}Related inline semantic elements
<q>— a short inline quotation, with aciteattribute for the source URL.<abbr>— marks an abbreviation or acronym.<dfn>— marks the defining instance of a term.