<cite>

Definition

The HTML <cite> element represents the title of a work (such as a book, film, musical composition, or a painting). It is typically used in the context of citing a reference or making a reference to a creative work.

Examples

<p>The novel <cite>The Great Gatsby</cite> was written by F. Scott Fitzgerald.</p>
<blockquote>
    <p>"So we beat on, boats against the current, borne back ceaselessly into the past."</p>
    <cite>The Great Gatsby</cite>
</blockquote>
<p>You can read more about <cite><a href="https://en.wikipedia.org/wiki/The_Great_Gatsby">The Great Gatsby</a></cite> on Wikipedia.</p>

In the example above, the <cite> element is used to enclose the title of a novel that is being referenced. It is also used within a <blockquote> element to indicate the source of a quote. Finally, it is used in combination with the <a> element to create a hyperlink to the Wikipedia page for the novel.

Attributes

This element makes use of the global attributes.

Best Practices

Best practices for using the <cite> element:

• Use the <cite> element to enclose the title of a creative work (such as a book, film, musical composition, or a painting) that is being referenced.
• Use the <cite> element within the <blockquote> or <q> element to indicate the source of a quote.
• Use the <cite> element in combination with the <a> element to create a hyperlink to the original source of the creative work being cited.

Accessibility Considerations

Accessibility considerations for the <cite> element:

• Use the <cite> element to enclose the title of a creative work being cited, rather than just using italics or bold text to indicate a citation. This will make the citation more semantically correct and easier for screen readers and other assistive technologies to interpret.
• If the <cite> element is used within a <blockquote> or <q> element to indicate the source of a quote, make sure to include the <cite> element immediately after the opening <blockquote> or <q> tag, and before the quoted content. This will ensure that the source is properly associated with the quote and will be read out by screen readers in the correct context.
• If the <cite> element is used in combination with the <a> element to create a hyperlink to the original source of the creative work being cited, make sure to include appropriate link text that accurately describes the target of the link. This will make the link more accessible to users, especially those who are using screen readers or other assistive technologies.

Browser Compatibility