The <cite> Element
As defined in the HTML Living Standard, the <cite> element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc).
More information can be found in The HTML Living Standard.
<p>My favorite book is <cite>The Great Gatsby</cite>.</p>
View HTML Living Standard: The cite element
Usage Rules & Common Misconceptions
- Titles Only: It must represent the title of a work. It should not include the name of the person who created the work.
- No Names: A common mistake is using
<cite>for the author's name. This is explicitly prohibited by the specification. - Styling: Browsers italicize the
<cite>element by default. Use CSS if you need to change this visual representation while maintaining the semantic meaning.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using <cite>, you programmatically identify the text as a citation of a work. This allows screen readers to provide more context to the user, distinguishing titles from regular text even if the visual italics are not perceivable.
Relationship with Blockquote
The <cite> element is often used in conjunction with <blockquote> to attribute a quote to its original source title.
<figure>
<blockquote>
<p>"Accessibility is already here, waiting for you to notice."</p>
</blockquote>
<figcaption>— from the manifesto <cite>SimpleAccess Principles</cite></figcaption>
</figure>