HTML cite Attribute

Introduction

The cite attribute in HTML is used to provide a reference or citation for the source of quoted content. It is commonly applied to elements that represent quoted or referenced text, such as <blockquote> and <q>. The attribute helps attribute content to its original source, adding credibility to the information presented.

What You’ll Learn

Purpose of cite

The primary purpose of the cite attribute is to specify the source URL for quoted or referenced content within an HTML document. This helps users, search engines, and developers trace back the origin of the information. The value is machine-readable metadata—it is not shown on the page by default.

📝 Syntax

Add cite with a URL on a quoting element:

<blockquote cite="https://www.example.com/article">
  This is a quoted text.
</blockquote>

Syntax Rules

• Value must be a valid URL pointing to the cited source.
• Valid on blockquote, q, del, and ins.
• The attribute is not displayed; add visible attribution separately.
• Use absolute URLs when the source is on another site.
• Pair with <cite> in a footer for human-readable titles.

💎 Values

The cite attribute accepts a URL as its value, pointing to the location of the cited source. Here is a basic example:

<blockquote cite="https://www.example.com/article">This is a quoted text.</blockquote>

In this example, the cite attribute contains the URL of the article from which the quoted text is taken. Book titles, author names, and publication names belong in visible content—typically inside a <cite> element—not in the attribute value.

Applicable Elements

Examples Gallery

Simple blockquote cite, blockquote with footer, and dynamic JavaScript cite property.

<blockquote cite="https://www.example.com/article">
  This is a quoted text.
</blockquote>

<blockquote cite="https://www.example.com/book">
  <p>This is a blockquote from a book.</p>
  <footer>— Author Name, <cite>Title of the Book</cite></footer>
</blockquote>

<blockquote id="dynamicBlockquote">
  "Learning HTML is fun!"
</blockquote>

<script>
  // Dynamically set the cite attribute for a blockquote
  document.getElementById("dynamicBlockquote").cite =
    "https://www.example.com/dynamic-source";
</script>

♿ Accessibility

• Visible attribution matters — The cite attribute alone does not help screen reader users; provide clear footer text or links.
• Use semantic quoting — Prefer blockquote and q over styled paragraphs for quotations.
• Link to sources — Consider an visible <a href> alongside the hidden cite URL.
• cite element for titles — The <cite> element names works in a standard, accessible way.
• Do not rely on URL alone — Human-readable context improves comprehension for all users.

💡 Best Practices

• Use the cite attribute when quoting or referencing content to provide proper attribution and enhance the credibility of your document.
• Ensure that the value of the cite attribute is a valid URL pointing to the original source.
• Utilize the <cite> element within the <footer> or alongside the quoted content to provide additional visible context, such as the title of a book or the name of an author.