HTML cite Attribute

The HTML cite attribute provides the URL of a source related to a quotation or document edit. It can be used with the <blockquote> and <q> elements to identify the source of quoted content and with the <del> and <ins> elements to provide a document that explains an edit.

Syntax

The cite attribute contains a URL that identifies the source of quoted content or a document that provides more information about an edit.

<blockquote cite="https://www.example-web.site/articles/web-design.html">
  <p>Quoted content appears here.</p>
</blockquote>

The URL may be relative or absolute and must be a valid URL.

Attribute Value

Value	Description
URL	Specifies the source of a quotation or a document containing additional information about an insertion or deletion.

Elements That Use the cite Attribute

The cite attribute is currently valid on the <blockquote>, <q>, <del>, and <ins> elements.

Element	Description
`<blockquote>`	Provides the URL of the source of a block quotation.
`<q>`	Provides the URL of the source of an inline quotation.
`<del>`	Provides the URL of a document that explains a deletion or change.
`<ins>`	Provides the URL of a document that explains an insertion or change.

Using cite with <blockquote>

On a <blockquote> element, the cite attribute identifies the source of the quoted content.

<blockquote cite="https://www.example-web.site/articles/web-design.html">
  <p>This paragraph represents content quoted from another source.</p>
</blockquote>

The cite attribute associates the quotation with its source URL, but browsers do not normally display that URL as part of the visible quotation.

Using cite with <q>

The <q> element represents a short inline quotation. Its cite attribute can identify the source of that quotation.

<p>The article states,
  <q cite="https://www.example-web.site/articles/web-design.html">This is a short quotation.</q>
</p>

As with <blockquote>, the source URL is metadata and is not normally presented to the reader as a clickable link.

Using cite with <del> and <ins>

On the <del> and <ins> elements, the cite attribute points to a document that explains the reason for the change or provides additional information about it.

<p>
  <del cite="/articles/changes.html">Old information</del>
  <ins cite="/articles/changes.html">Updated information</ins>
</p>

The datetime attribute can also be used with these elements when the date or time of the change needs to be recorded.

Relative and Absolute URLs

The cite attribute can contain either a relative URL or an absolute URL.

<!-- Relative URL -->
<blockquote cite="/articles/web-design.html">
  ...
</blockquote>

<!-- Absolute URL -->
<blockquote cite="https://www.example-web.site/articles/web-design.html">
  ...
</blockquote>

Relative URLs are resolved against the document's base URL, while absolute URLs identify the complete location of the resource.

cite Attribute vs. <cite> Element

The cite attribute and the <cite> element have different purposes. The attribute contains a URL associated with a quotation or edit, while the element represents the title of a work.

Feature	Purpose
`cite` attribute	Provides a URL for the source of a quotation or information about an edit.
`<cite>` element	Represents the title of a work, such as a book, article, film, song, painting, or other creative work.

<p>The quotation comes from <cite>Example Article</cite>.</p>

<blockquote cite="https://www.example-web.site/articles/web-design.html">
  <p>Quoted content appears here.</p>
</blockquote>

Providing a Visible Source Link

The cite attribute does not create a visible hyperlink. If readers should be able to open the source, provide a normal <a> element in addition to the cite attribute.

<blockquote cite="https://www.example-web.site/articles/web-design.html">
  <p>Quoted content appears here.</p>
</blockquote>

<p>
  Source:
  <a href="https://www.example-web.site/articles/web-design.html">Web Design Article</a>
</p>

This makes the source directly available to readers instead of relying on the metadata stored in the cite attribute.

Common Mistakes

Do not put the name of an author or the title of a work in the cite attribute. Its value is a URL.

<!-- Incorrect -->
<blockquote cite="Example Article">
  ...
</blockquote>

<!-- Correct -->
<blockquote cite="https://www.example-web.site/articles/web-design.html">
  ...
</blockquote>

Do not confuse the cite attribute with the <cite> element. They serve different purposes.

Do not assume the browser will display the source URL or turn it into a visible link. Add an <a> element when readers need direct access to the source.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The cite attribute and its established uses are widely supported in current core browsers. It is used by several elements, including <blockquote>, <q>, <del>, and <ins>.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the cite Attribute

The example uses the cite attribute on both a block quotation and an inline quotation. A separate link is included so the source can also be opened directly by the reader.

Play in Editor

Summary

The HTML cite attribute contains a URL associated with a quotation or document edit. It is valid on the <blockquote>, <q>, <del>, and <ins> elements. The attribute provides metadata rather than a visible hyperlink, so use an <a> element when readers should be able to open the source directly.